/*
 * MagicKcal UI-Styleguide v0.24
 * Status: TXT-/CC-Umsetzung Chat 66w, 13.09.2026
 *
 * Zweck:
 * - Verbindliche Button-, Tab-, Toggle-, Badge- und Accordion-Geometrien.
 * - Gemeinsame CSS-Codes für App und .com.
 * - Externe SVG-Piktogramme aus assets/pictograms/ui/.
 *
 * Nicht verändert:
 * - Funktions-, Daten- und Navigationslogik.
 * - Große HOME-/index-/start-Sonderbuttons und globale Navigation.
 */

@keyframes mkUiMagicRainbow {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.mkStyleguideV014 {
  --mk-ui-go: #5CE08A;
  --mk-ui-alert: #FF3232;
  --mk-ui-neutral-bg: #2D3541;
  --cc-b1: #2D3541;
  --cc-b2: #2D3541;
  --mk-ui-neutral-border: #858A91;
  --mk-ui-today: #5CE08A;
  --mk-ui-past: #FFCC66;
  --mk-ui-future: #7EA8FF;
}

.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I
) {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--cc-b1);
  color: #FFFFFF;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.mkStyleguideV014 :is(.BS-AG-H, .BS-AG-P, .BS-AG-HH) {
  border: 1px solid var(--mk-ui-go);
}

.mkStyleguideV014 :is(.BS-AA-PK, .BS-AA-X, .BS-AA-S) {
  border: 1px solid var(--mk-ui-alert);
}

.mkStyleguideV014 :is(
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AN-ST, .BS-AN-A, .BS-AN-U,
  .BS-AN-K, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I
) {
  border: 1px solid var(--mk-ui-neutral-border);
}

.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I
):not(:disabled):is(:hover, :active) {
  border-width: 2px;
}

.mkStyleguideV014 :is(
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z,
  .BS-CG-TW, .BS-CG-KC, .BS-BN
) {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: max-content;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  border-radius: 20px;
  background: var(--mk-ui-neutral-bg);
  color: #FFFFFF;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.mkStyleguideV014 :is(.BS-CG-H, .BS-CG-P, .BS-CG-TW, .BS-CG-KC) {
  gap: 7px;
  border: 1px solid var(--mk-ui-go);
}

.mkStyleguideV014 :is(.BS-CA-PK, .BS-CA-AB, .BS-CA-X) {
  gap: 7px;
  border: 1px solid var(--mk-ui-alert);
}

.mkStyleguideV014 :is(.BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z) {
  gap: 7px;
  border: 1px solid var(--mk-ui-neutral-border);
}

.mkStyleguideV014 .BS-BN {
  gap: 0;
  border: 1px solid var(--mk-ui-neutral-border);
}
.mkStyleguideV014 .BS-BN > svg { display: none; }

.mkStyleguideV014 :is(
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z,
  .BS-CG-TW, .BS-CG-KC, .BS-BN
):not(:disabled):is(:hover, :active) {
  border-width: 2px;
  padding-inline: 9px;
}

.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I,
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z,
  .BS-CG-TW, .BS-CG-KC, .BS-BN, .BS-DM-M, .TB-04 button
):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I,
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z,
  .BS-CG-TW, .BS-CG-KC, .BS-BN, .BS-DM-M, .TB-04 button
):focus-visible {
  outline: 3px solid var(--mk-ui-go);
  outline-offset: 4px;
}

.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I,
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z,
  .BS-CG-TW, .BS-CG-KC, .BS-BN
):disabled {
  opacity: .58;
  cursor: not-allowed;
  pointer-events: none;
}

.mkStyleguideV014 .BS-DM-M {
  isolation: isolate;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: max-content;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  gap: 7px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #FFFFFF;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.mkStyleguideV014 .BS-DM-M::before,
.mkStyleguideV014 .BS-DM-M::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.mkStyleguideV014 .BS-DM-M::before {
  z-index: -2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(45deg, red, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, red);
  background-size: 400%;
  animation: mkUiMagicRainbow 20s linear infinite;
}

.mkStyleguideV014 .BS-DM-M::after {
  z-index: -1;
  inset: 3px;
  border-radius: 17px;
  background: #000001;
}

.mkStyleguideV014 .BS-DM-M:active::after { background: var(--mk-ui-go); }
.mkStyleguideV014 .BS-DM-M:disabled { opacity: .58; cursor: not-allowed; pointer-events: none; }
.mkStyleguideV014 .BS-DM-M > * { position: relative; z-index: 2; }

/* Externe Piktogramme: vorhandene Inline-Altgrafik wird nur visuell ersetzt. */
.mkStyleguideV014 [data-mk-icon] > svg[data-icon] {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.mkStyleguideV014 [data-mk-icon] > svg[data-icon] > * { display: none; }

.mkStyleguideV014 .BS-CA-AB[data-mk-icon="logout"] > img {
  width: 18px;
  height: 18px;
  content: url("assets/pictograms/ui/logout.svg");
}

.mkStyleguideV014 .mkUiIcon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.mkStyleguideV014 [data-mk-icon="check"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="check"] { background-image: url("assets/pictograms/ui/check.svg"); }
.mkStyleguideV014 [data-mk-icon="plus"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="plus"] { background-image: url("assets/pictograms/ui/plus.svg"); }
.mkStyleguideV014 [data-mk-icon="trash"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="trash"] { background-image: url("assets/pictograms/ui/trash.svg"); }
.mkStyleguideV014 [data-mk-icon="x"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="x"] { background-image: url("assets/pictograms/ui/x.svg"); }
.mkStyleguideV014 [data-mk-icon="share"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="share"] { background-image: url("assets/pictograms/ui/share.svg"); }
.mkStyleguideV014 [data-mk-icon="search"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="search"] { background-image: url("assets/pictograms/ui/search.svg"); }
.mkStyleguideV014 [data-mk-icon="ean"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="ean"] { background-image: url("assets/pictograms/ui/ean.svg"); }
.mkStyleguideV014 [data-mk-icon="cloud"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="cloud"] { background-image: url("assets/pictograms/ui/cloud.svg"); }
.mkStyleguideV014 [data-mk-icon="download"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="download"] { background-image: url("assets/pictograms/ui/download.svg"); }
.mkStyleguideV014 [data-mk-icon="eye"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="eye"] { background-image: url("assets/pictograms/ui/eye.svg"); }
.mkStyleguideV014 [data-mk-icon="edit"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="edit"] { background-image: url("assets/pictograms/ui/edit.svg"); }
.mkStyleguideV014 [data-mk-icon="tour"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="tour"] { background-image: url("assets/pictograms/ui/tour.svg"); }
.mkStyleguideV014 [data-mk-icon="mail"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="mail"] { background-image: url("assets/pictograms/ui/mail.svg"); }
.mkStyleguideV014 [data-mk-icon="print"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="print"] { background-image: url("assets/pictograms/ui/print.svg"); }
.mkStyleguideV014 [data-mk-icon="copy"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="copy"] { background-image: url("assets/pictograms/ui/copy.svg"); }
.mkStyleguideV014 [data-mk-icon="upload"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="upload"] { background-image: url("assets/pictograms/ui/upload.svg"); }
.mkStyleguideV014 [data-mk-icon="camera"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="camera"] { background-image: url("assets/pictograms/ui/camera.svg"); }
.mkStyleguideV014 [data-mk-icon="wand"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="wand"] { background-image: url("assets/pictograms/ui/wand.svg"); }
.mkStyleguideV014 [data-mk-icon="back"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="back"] { background-image: url("assets/pictograms/ui/date-zurueck.svg"); }
.mkStyleguideV014 [data-mk-icon="next"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="next"] { background-image: url("assets/pictograms/ui/date-vor.svg"); }
.mkStyleguideV014 [data-mk-icon="today"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="today"] { background-image: url("assets/pictograms/ui/date-heute.svg"); }
.mkStyleguideV014 [data-mk-icon="logout"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="logout"] { background-image: url("assets/pictograms/ui/logout.svg"); }
.mkStyleguideV014 [data-mk-icon="tarifwechsel"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="tarifwechsel"] { background-image: url("assets/pictograms/ui/tarifwechsel.svg"); }
.mkStyleguideV014 [data-mk-icon="lock-open"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="lock-open"] { background-image: url("assets/pictograms/ui/unlock-neutral.svg"); }
.mkStyleguideV014 [data-mk-icon="lock-closed"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="lock-closed"] { background-image: url("assets/pictograms/ui/lock-alert.svg"); }
.mkStyleguideV014 [data-mk-icon="cart"] > svg[data-icon],
.mkStyleguideV014 .mkUiIcon[data-mk-icon="cart"] { background-image: url("assets/pictograms/ui/cart.svg"); }
.mkStyleguideV014 [data-mk-icon="cart"]:not(:disabled):is(:hover, :active) > svg[data-icon] { background-image: url("assets/pictograms/ui/cart-go.svg"); }

.mkStyleguideV014 :is(
  .BS-CG-KC, .BS-CG-TW, .BS-CN-TO,
  .BS-CG-H.hasMkGeneratedIcon, .BS-CA-X.hasMkGeneratedIcon,
  .BS-AN-HZ.hasMkGeneratedIcon, .BS-AN-HV.hasMkGeneratedIcon
)::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.mkStyleguideV014 .BS-CG-KC::before { background-image: url("assets/pictograms/ui/kundencenter-go.svg"); }
.mkStyleguideV014 .BS-CG-TW::before { background-image: url("assets/pictograms/ui/tarifwechsel.svg"); }
.mkStyleguideV014 .BS-CN-TO::before { background-image: url("assets/pictograms/ui/tour.svg"); }
.mkStyleguideV014 .BS-CG-H.hasMkGeneratedIcon::before { background-image: url("assets/pictograms/ui/check.svg"); }
.mkStyleguideV014 .BS-CA-X.hasMkGeneratedIcon::before { background-image: url("assets/pictograms/ui/x.svg"); }
.mkStyleguideV014 .BS-AN-HZ.hasMkGeneratedIcon::before { background-image: url("assets/pictograms/ui/date-zurueck.svg"); }
.mkStyleguideV014 .BS-AN-HV.hasMkGeneratedIcon::before { background-image: url("assets/pictograms/ui/date-vor.svg"); }
.mkStyleguideV014 :is(.BS-AN-HZ, .BS-AN-HV).hasMkGeneratedIcon { font-size: 0; }

.mkStyleguideV014 .BS-BG-D {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  min-width: 124px;
  height: 44px;
  min-height: 44px;
  padding: 0 9px;
  border: 1px solid;
  border-radius: 999px;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}
.mkStyleguideV014 .BS-BG-D.today { color: var(--mk-ui-today); background: #5CE08A1F; border-color: #5CE08A85; }
.mkStyleguideV014 .BS-BG-D.past { color: var(--mk-ui-past); background: #FFCC661A; border-color: #FFCC6673; }
.mkStyleguideV014 .BS-BG-D.future { color: var(--mk-ui-future); background: #7EA8FF1A; border-color: #7EA8FF73; }

.mkStyleguideV014 .TG-01 {
  box-sizing: border-box;
  width: 64px;
  min-width: 64px;
  height: 30px;
  min-height: 30px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--cc-b2);
  cursor: pointer;
  transition: none;
  box-shadow: none;
}
.mkStyleguideV014 .TG-01 .tg-thumb {
  display: block;
  width: 34px;
  height: 22px;
  border-radius: 999px;
  background: var(--cc-w);
  transform: translateX(0);
  transition: none;
}
.mkStyleguideV014 .TG-01[aria-checked="true"],
.mkStyleguideV014 .TG-01.on,
.mkStyleguideV014 input:checked + .TG-01 { background: var(--cc-ci); }
.mkStyleguideV014 .TG-01[aria-checked="true"] .tg-thumb,
.mkStyleguideV014 .TG-01.on .tg-thumb,
.mkStyleguideV014 input:checked + .TG-01 .tg-thumb { transform: translateX(22px); }
.mkStyleguideV014 .TG-01:focus,
.mkStyleguideV014 .TG-01:focus-visible { outline: none; box-shadow: none; }
.mkStyleguideV014 .TG-01:disabled,
.mkStyleguideV014 input:disabled + .TG-01 { opacity: .58; cursor: default; }

.mkStyleguideV014 .BG-01 {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--mk-ui-alert);
  color: #FFFFFF;
  font: 700 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.mkStyleguideV014 .BG-EK-ST {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  border: 1px solid #FFFFFF2E;
  border-radius: 50%;
  background: #121820F0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mkStyleguideV014 .BG-EK-ST > svg[data-icon] {
  width: 14px;
  height: 14px;
  background-image: url("assets/pictograms/ui/edit.svg");
}

.mkStyleguideV014 .TB-01 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}
.mkStyleguideV014 .TB-01 > button {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 0 .70rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid #FFFFFF14;
  border-radius: 999px;
  background: color-mix(in srgb, #222832 88%, #FFFFFF 12%);
  color: #FFFFFF;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: none;
}
.mkStyleguideV014 .TB-01.today > button.active { background: var(--mk-ui-today); border-color: var(--mk-ui-today); color: #08130C; }
.mkStyleguideV014 .TB-01.past > button.active { background: var(--mk-ui-past); border-color: var(--mk-ui-past); color: #171104; }
.mkStyleguideV014 .TB-01.future > button.active { background: var(--mk-ui-future); border-color: var(--mk-ui-future); color: #071126; }
.mkStyleguideV014 .TB-01 .tab-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 .36rem;
  border-radius: 999px;
  background: #101318;
  color: #FFFFFF;
  display: inline-grid;
  place-items: center;
  font-size: .74rem;
  line-height: 1;
  flex: 0 0 auto;
}

.mkStyleguideV014 .TB-02 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .28rem;
  border: 1px solid #FFFFFF14;
  border-radius: 999px;
  background: #FFFFFF0A;
}
.mkStyleguideV014 .TB-02 > button {
  padding: .52rem .90rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #AEB8C4;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: none;
}
.mkStyleguideV014 .TB-02.today > button.active { background: var(--mk-ui-today); color: #08130C; box-shadow: 0 6px 16px #5CE08A3D; }
.mkStyleguideV014 .TB-02.past > button.active { background: var(--mk-ui-past); color: #171104; box-shadow: 0 6px 16px #FFCC663D; }
.mkStyleguideV014 .TB-02.future > button.active { background: var(--mk-ui-future); color: #071126; box-shadow: 0 6px 16px #7EA8FF3D; }

.mkStyleguideV014 .TB-03 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.mkStyleguideV014 .TB-03 > button {
  padding: .46rem .76rem;
  border: 1px solid #FFFFFF1F;
  border-radius: 999px;
  background: var(--mk-ui-neutral-bg);
  color: #FFFFFF;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: none;
}
.mkStyleguideV014 .TB-03 > button.active { background: var(--mk-ui-go); border-color: var(--mk-ui-go); color: #06140D; }

.mkStyleguideV014 .TB-04 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.mkStyleguideV014 .TB-04 > button {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #FFFFFF1F;
  border-radius: 999px;
  background: var(--mk-ui-neutral-bg);
  color: #FFFFFF;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: none;
}
.mkStyleguideV014 .TB-04.today > button.active { background: var(--mk-ui-today); border-color: var(--mk-ui-today); color: #06140D; }
.mkStyleguideV014 .TB-04.past > button.active { background: var(--mk-ui-past); border-color: var(--mk-ui-past); color: #171104; }
.mkStyleguideV014 .TB-04.future > button.active { background: var(--mk-ui-future); border-color: var(--mk-ui-future); color: #071126; }

.mkStyleguideV014 .AC-01 {
  display: inline-flex;
  align-items: center;
  gap: .22em;
  padding: .12rem 0;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font: 700 16px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.mkStyleguideV014 .AC-01 .ac-chevron { width: .9em; display: inline-grid; place-items: center; color: #AEB8C4; }
.mkStyleguideV014 .AC-01[aria-expanded="true"] .ac-chevron,
.mkStyleguideV014 .AC-01 .ac-chevron.open { transform: rotate(90deg); }

.mkStyleguideV014 .AC-02 {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}
.mkStyleguideV014 .AC-02 .ac-chevron { width: .85rem; color: #AEB8C4; flex: none; font-size: 1.18rem; }
.mkStyleguideV014 .AC-02[aria-expanded="true"] .ac-chevron,
.mkStyleguideV014 .AC-02 .ac-chevron.open { transform: rotate(90deg); }
.mkStyleguideV014 .AC-02:is(:hover, :focus-visible) .ac-text { text-decoration: underline; text-underline-offset: .18em; }
.mkStyleguideV014 .AC-02:focus-visible { outline: none; }

.mkStyleguideV014 .AC-03 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.mkStyleguideV014 .AC-03 strong { color: #FFFFFF; font-weight: 700; }
.mkStyleguideV014 .AC-03 .ac-meta { color: #AEB8C4; font-weight: 700; }
.mkStyleguideV014 .AC-03 .ac-meta.down { color: var(--mk-ui-go); }
.mkStyleguideV014 .AC-03 .ac-meta.up { color: #FF3232; }

.mkStyleguideV014 .AC-04 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .20rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  text-align: left;
  font: 700 16px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.mkStyleguideV014 .AC-04 .ac-label { display: inline-flex; align-items: center; gap: .35rem; }
.mkStyleguideV014 .AC-04:is(:hover, :focus-visible) { color: var(--mk-ui-go); outline: none; }
.mkStyleguideV014 .AC-04 .ac-chevron { color: #AEB8C4; font-size: 1.3rem; }
.mkStyleguideV014 .AC-04[aria-expanded="true"] .ac-chevron,
.mkStyleguideV014 .AC-04 .ac-chevron.open { transform: rotate(90deg); }

.mkStyleguideV014 .FB-A-X {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mk-ui-alert);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: none;
  box-shadow: none;
}
.mkStyleguideV014 .searchInputClearGroup {
  position: relative !important;
  display: block !important;
}
.mkStyleguideV014 .searchInputClearGroup > input {
  width: 100% !important;
  padding-right: 44px !important;
}

.mkStyleguideV014 .SF-01 {
  position: relative;
  width: 100%;
  min-height: 40px;
  padding: .55rem 2rem .55rem .68rem;
  border: 1px solid #303846;
  border-radius: 12px;
  background: #151A21;
  color: #FFFFFF;
  font: 400 16px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
}
.mkStyleguideV014 .SF-01-option {
  min-height: 46px;
  padding: .62rem .72rem;
  border: 0;
  border-bottom: 1px solid #252D38;
  border-radius: 10px;
  background: transparent;
  color: #FFFFFF;
  font: 400 16px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: left;
}
.mkStyleguideV014 .SF-01-option.active {
  background: color-mix(in srgb, var(--mk-ui-go) 13%, #151A21 87%);
  outline: 1px solid color-mix(in srgb, var(--mk-ui-go) 55%, #303846 45%);
}

.mkStyleguideV014 .LK-01 {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mk-ui-go);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mkStyleguideV014 .LK-01:is(:hover, :focus-visible) { text-decoration: underline; }

@media (max-width: 760px) {
  .mkStyleguideV014 .BS-BG-D { width: 112px; min-width: 112px; height: 40px; min-height: 40px; }
}

/*
 * Integrations-Layer gegen ältere, teils mit !important fixierte Regeln.
 * Die Werte wiederholen ausschließlich die oben definierten v0.14-Vorgaben.
 */
.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I
) {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--cc-b1) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}
.mkStyleguideV014 :is(.BS-AG-H, .BS-AG-P, .BS-AG-HH) { border: 1px solid var(--mk-ui-go) !important; }
/* Verbindliche Button-Hintergrund-Ausnahmen: ausdrücklich freigegeben. */
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AN-A { background: transparent !important; }
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AN-Z { background: var(--cc-fb) !important; }
.mkStyleguideV014 :is(.BS-AA-PK, .BS-AA-X, .BS-AA-S) { border: 1px solid var(--mk-ui-alert) !important; }
.mkStyleguideV014 :is(
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AN-ST, .BS-AN-A, .BS-AN-U,
  .BS-AN-K, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I
) { border: 1px solid var(--mk-ui-neutral-border) !important; }
.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I
):not(:disabled):is(:hover, :active) { border-width: 2px !important; }

.mkStyleguideV014 :is(
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO,
  .BS-CN-DR, .BS-CN-Z, .BS-CG-TW, .BS-CG-KC, .BS-BN
) {
  width: auto !important;
  min-width: max-content !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 20px !important;
  background: var(--mk-ui-neutral-bg) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.mkStyleguideV014 :is(.BS-CG-H, .BS-CG-P, .BS-CG-TW, .BS-CG-KC) { border: 1px solid var(--mk-ui-go) !important; }
.mkStyleguideV014 :is(.BS-CA-PK, .BS-CA-AB, .BS-CA-X) { border: 1px solid var(--mk-ui-alert) !important; }
.mkStyleguideV014 :is(.BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO, .BS-CN-DR, .BS-CN-Z, .BS-BN) {
  border: 1px solid var(--mk-ui-neutral-border) !important;
}
.mkStyleguideV014 :is(
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO,
  .BS-CN-DR, .BS-CN-Z, .BS-CG-TW, .BS-CG-KC, .BS-BN
):not(:disabled):is(:hover, :active) {
  border-width: 2px !important;
  padding-inline: 9px !important;
}

.mkStyleguideV014 :is(
  .BS-AG-H, .BS-AG-P, .BS-AA-PK, .BS-AA-X,
  .BS-AN-T, .BS-AN-LU, .BS-AN-EAN, .BS-AN-C, .BS-AN-D,
  .BS-AN-W, .BS-AN-S, .BS-AA-S, .BS-AN-ST, .BS-AN-A,
  .BS-AN-U, .BS-AN-K, .BS-AG-HH, .BS-AN-HV, .BS-AN-HZ, .BS-AN-Z, .BS-I,
  .BS-CG-H, .BS-CG-P, .BS-CA-PK, .BS-CA-AB, .BS-CA-X,
  .BS-CN-T, .BS-CN-F, .BS-CN-D, .BS-CN-ST, .BS-CN-TO,
  .BS-CN-DR, .BS-CN-Z, .BS-CG-TW, .BS-CG-KC, .BS-BN, .BS-DM-M
):focus-visible {
  outline: 3px solid var(--mk-ui-go) !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
}

.mkStyleguideV014 .BS-DM-M {
  width: auto !important;
  min-width: max-content !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.mkStyleguideV014 .BS-DM-M::after { background: #000001 !important; }
.mkStyleguideV014 .BS-DM-M:active::after { background: var(--mk-ui-go) !important; }

.mkStyleguideV014 .TG-01 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cc-b2) !important;
  box-shadow: none !important;
  transition: none !important;
}
.mkStyleguideV014 .TG-01 .tg-thumb {
  display: block !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  border-radius: 999px !important;
  background: var(--cc-w) !important;
  transform: translateX(0) !important;
  box-shadow: none !important;
  transition: none !important;
}
.mkStyleguideV014 .TG-01[aria-checked="true"],
.mkStyleguideV014 .TG-01.on,
.mkStyleguideV014 input:checked + .TG-01,
.mkStyleguideV014 .customer-consent-control input[type="checkbox"]:checked + .TG-01 {
  justify-content: flex-start !important;
  background: var(--cc-ci) !important;
  box-shadow: none !important;
}
.mkStyleguideV014 .TG-01[aria-checked="true"] .tg-thumb,
.mkStyleguideV014 .TG-01.on .tg-thumb,
.mkStyleguideV014 input:checked + .TG-01 .tg-thumb,
.mkStyleguideV014 .customer-consent-control input[type="checkbox"]:checked + .TG-01 .tg-thumb {
  transform: translateX(22px) !important;
}
.mkStyleguideV014 .TG-01:focus,
.mkStyleguideV014 .TG-01:focus-visible,
.mkStyleguideV014 .customer-consent-control input[type="checkbox"]:focus-visible + .TG-01 {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Korrekturrunde Styleguide v0.16 / Mapping rev5. */
.mkStyleguideV014 :is(.BS-AA-W, .BS-AN-KO) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--cc-b1) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}
.mkStyleguideV014 .BS-AA-W { border: 1px solid var(--mk-ui-alert) !important; }
.mkStyleguideV014 .BS-AN-KO { border: 1px solid var(--mk-ui-neutral-border) !important; }
.mkStyleguideV014 :is(.BS-AA-W, .BS-AN-KO):not(:disabled):is(:hover, :active) {
  border-width: 2px !important;
}
.mkStyleguideV014 :is(.BS-AA-W, .BS-AN-KO):disabled {
  opacity: .58 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.mkStyleguideV014 :is(.BS-AA-W, .BS-AN-KO):focus-visible {
  outline: 3px solid var(--mk-ui-go) !important;
  outline-offset: 4px !important;
}
.mkStyleguideV014 [data-mk-icon="cook"] > svg[data-icon] {
  background-image: url("assets/pictograms/ui/kochen.svg") !important;
}
.mkStyleguideV014 .BS-AA-W[data-mk-icon="cart"] > svg[data-icon] {
  background-image: url("assets/pictograms/ui/cart-alert.svg") !important;
}
.mkStyleguideV014 .BS-AN-W[data-mk-icon="cart"]:not(:disabled):is(:hover, :active) > svg[data-icon] {
  background-image: url("assets/pictograms/ui/cart.svg") !important;
}
.mkStyleguideV014 .mkUiIconOnlyLabel {
  gap: 0 !important;
  font-size: 0 !important;
}

.mkStyleguideV014 .FB-A-X {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mk-ui-alert) !important;
  box-shadow: none !important;
}

.mkStyleguideV014 .TG-01:is(.on, [aria-checked="true"]),
.mkStyleguideV014 input:checked + .TG-01 {
  justify-content: flex-start !important;
  background: var(--mk-ui-go) !important;
}
.mkStyleguideV014 .TG-01:is(.on, [aria-checked="true"]) .tg-thumb,
.mkStyleguideV014 input:checked + .TG-01 .tg-thumb {
  transform: translateX(22px) !important;
}
.mkStyleguideV014 .TG-01[aria-checked="false"]:not(.on) .tg-thumb,
.mkStyleguideV014 input:not(:checked) + .TG-01 .tg-thumb {
  transform: translateX(0) !important;
}

.mkStyleguideV014 .TB-01 { display: none !important; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  .mkStyleguideV014 .TB-01 { display: grid !important; }
}

.mkStyleguideV014 :is(.dateStepButton.BS-AN-HZ, .dateStepButton.BS-AN-HV,
  .calendarHeader .BS-AN-HZ, .calendarHeader .BS-AN-HV) {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--mk-ui-neutral-border) !important;
  border-radius: 50% !important;
  background: var(--cc-b1) !important;
  color: #FFFFFF !important;
}
.mkStyleguideV014 :is(.dateStepButton.BS-AN-HZ, .dateStepButton.BS-AN-HV,
  .calendarHeader .BS-AN-HZ, .calendarHeader .BS-AN-HV):not(:disabled):is(:hover, :active) {
  border-width: 2px !important;
}
.mkStyleguideV014 .todayJump.BS-AG-HH {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--mk-ui-go) !important;
  border-radius: 50% !important;
  background: var(--cc-b1) !important;
  color: #FFFFFF !important;
}
.mkStyleguideV014 .todayJump.BS-AG-HH:not(:disabled):is(:hover, :active) {
  border-width: 2px !important;
}

/* Datumsnavigation: verbindliche Endregeln gegen kompakte Legacy-Overrides. */
html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav :is(
  .dateStepButton.BS-AN-HZ, .dateStepButton.BS-AN-HV, .todayJump.BS-AG-HH
),
html.mkStyleguideV014 body.mkStyleguideV014 .calendarHeader :is(
  .BS-AN-HZ, .BS-AN-HV, .BS-AG-HH
) {
  box-sizing: border-box !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--cc-b1) !important;
  transition: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav :is(
  .dateStepButton.BS-AN-HZ, .dateStepButton.BS-AN-HV
),
html.mkStyleguideV014 body.mkStyleguideV014 .calendarHeader :is(.BS-AN-HZ, .BS-AN-HV) {
  border: 1px solid var(--mk-ui-neutral-border) !important;
  color: #FFFFFF !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav :is(
  .dateStepButton.BS-AN-HZ, .dateStepButton.BS-AN-HV
):not(:disabled):is(:hover, :active),
html.mkStyleguideV014 body.mkStyleguideV014 .calendarHeader :is(
  .BS-AN-HZ, .BS-AN-HV
):not(:disabled):is(:hover, :active) {
  border: 2px solid var(--mk-ui-neutral-border) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav .todayJump.BS-AG-HH,
html.mkStyleguideV014 body.mkStyleguideV014 .calendarHeader .BS-AG-HH {
  border: 1px solid var(--mk-ui-go) !important;
  color: #FFFFFF !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav .todayJump.BS-AG-HH:not(:disabled):is(:hover, :active),
html.mkStyleguideV014 body.mkStyleguideV014 .calendarHeader .BS-AG-HH:not(:disabled):is(:hover, :active) {
  border: 2px solid var(--mk-ui-go) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav .dateButton.BS-BG-D,
html.mkStyleguideV014 body.mkStyleguideV014 .stableDateNav .dateButton.BS-BG-D {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 9px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  transition: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .dateButton.BS-BG-D.today {
  color: #5CE08A !important;
  background: #5CE08A1F !important;
  border-color: #5CE08A85 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .dateButton.BS-BG-D.past {
  color: #FFCC66 !important;
  background: #FFCC661A !important;
  border-color: #FFCC6673 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .dateButton.BS-BG-D.future {
  color: #7EA8FF !important;
  background: #7EA8FF1A !important;
  border-color: #7EA8FF73 !important;
}
@media (max-width: 760px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav .dateButton.BS-BG-D,
  html.mkStyleguideV014 body.mkStyleguideV014 .stableDateNav .dateButton.BS-BG-D {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

.mkStyleguideV014 .AC-01 .ac-title {
  font-size: var(--type-hl1, 24px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
.mkStyleguideV014 .AC-01.today .ac-title { color: var(--mk-ui-today) !important; }
.mkStyleguideV014 .AC-01.past .ac-title { color: var(--mk-ui-past) !important; }
.mkStyleguideV014 .AC-01.future .ac-title { color: var(--mk-ui-future) !important; }

.mkStyleguideV014 .mkAutoKcalGoalPill.BS-DM-M > :is(svg, img, .mkAutoKcalCheck) {
  display: none !important;
}

/* Einstellungen: Reiter stehen auf dem Seitenhintergrund. Sichtbare Inhaltskacheln
   bleiben eigenständige KA-H; technische Konto-Gruppenwrapper sind nie sichtbar. */
.mkStyleguideV014 .settingsTabbedCard.settingsUnifiedMode {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mkStyleguideV014 .settingsTabbedCard.settingsUnifiedMode > .settingsTabPanel > .settingsInnerCard:not(.accountOverviewCard):not(.accountSettingsCard) {
  min-height: 0 !important;
  padding: 1rem !important;
  /* Sichtbare Einstellungen-Inhaltskacheln sind KA-H. Keine zweite visuelle Definition hier. */
}

/* Alert-X: Rand und Piktogramm ohne reduzierte Farbopazität. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AA-X, button.BS-CA-X) {
  border-style: solid !important;
  border-color: #FF3232 !important;
  color: #FF3232 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AA-X, button.BS-CA-X):not(:disabled) {
  opacity: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AA-X, button.BS-CA-X):not(:disabled):is(:hover, :active) {
  border-color: #FF3232 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AA-X, button.BS-CA-X) :is(svg, img, .mkUiIcon),
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AA-X, button.BS-CA-X)::before {
  color: #FF3232 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Login-Dialog: BS-AA-X exakt nach Master, keine lokale Verkleinerung. */
html.mkStyleguideV014 body.mkStyleguideV014 .authLoginHead button.BS-AA-X {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 40px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 50% !important;
  background: var(--cc-b1) !important;
  border: 1px solid var(--mk-ui-alert) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .authLoginHead button.BS-AA-X > svg[data-icon] {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.mkStyleguideV014 .customer-password-toggle.FB-N-A {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  transform: translateY(-50%) !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #000000 !important;
  box-shadow: none !important;
}
.mkStyleguideV014 .customer-password-toggle.FB-N-A:disabled {
  opacity: .58 !important;
  cursor: not-allowed !important;
}
.mkStyleguideV014 .customer-password-toggle.FB-N-A:is(:hover, :active, :focus-visible) {
  border: 0 !important;
  background: transparent !important;
  color: #000000 !important;
  box-shadow: none !important;
}
.mkStyleguideV014 .customer-password-toggle.FB-N-A > .customer-password-eye {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
}

/* Letzte Korrekturrunde: iPhone-Tagesliste nutzt den vorhandenen funktionalen Accordion-Kopf. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planToggle.planToggleDesktop.AC-01 {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .12rem 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planTitlePhone {
    display: none !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planContent.planContentClosed {
    display: none !important;
  }
}

/* Zweizustands-Buttons: dauerhaft nur AN/AUS; 2 px ausschließlich während des Drückens. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  button.BS-AN-S, button.BS-AA-S, button.BS-AN-W, button.BS-AA-W
):not(:disabled):hover {
  border-width: 1px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  button.BS-AN-S, button.BS-AA-S, button.BS-AN-W, button.BS-AA-W
):not(:disabled):focus:not(:focus-visible) {
  border-width: 1px !important;
  outline: none !important;
  box-shadow: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  button.BS-AN-S, button.BS-AA-S, button.BS-AN-W, button.BS-AA-W
):not(:disabled):active {
  border-width: 2px !important;
}

/* BS-AA-S: alte .planLockBtn.locked-Danger-Mischung vollständig neutralisieren. */
html.mkStyleguideV014 body.mkStyleguideV014 .planLine button.planLockBtn.locked.BS-AA-S {
  color: #FF3232 !important;
  border-color: #FF3232 !important;
  background: var(--cc-b1) !important;
  opacity: 1 !important;
  filter: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .planLine button.planLockBtn.locked.BS-AA-S > svg[data-icon] {
  color: #FF3232 !important;
  opacity: 1 !important;
}

/* BG-01 Rot: nur die als BG-01 klassifizierten roten Zähler-Badges als Vollton. */
html.mkStyleguideV014 body.mkStyleguideV014 .BG-01 {
  background: #FF3232 !important;
  opacity: 1 !important;
}

/* Statuspille „noch einkaufen“: neutrale Fläche, ausschließlich Rand/Text alertrot. */
html.mkStyleguideV014 body.mkStyleguideV014 .planName > em {
  background: var(--mk-ui-neutral-bg) !important;
  border-color: #FF3232 !important;
  color: #FF3232 !important;
  opacity: 1 !important;
}

/* Einstellungen: alle vier Reiter bilden eine einheitliche TB-03-Gruppe. */
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: .45rem !important;
  margin-bottom: 1rem !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: .46rem .76rem !important;
  border: 1px solid #FFFFFF1F !important;
  border-radius: 999px !important;
  background: var(--mk-ui-neutral-bg) !important;
  color: #FFFFFF !important;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button.active {
  background: var(--mk-ui-go) !important;
  border-color: var(--mk-ui-go) !important;
  color: #06140D !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button:not(.active):is(:hover, :active) {
  background: var(--mk-ui-neutral-bg) !important;
  border-color: #FFFFFF1F !important;
  color: #FFFFFF !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button:focus:not(:focus-visible) {
  outline: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button:focus-visible {
  outline: 3px solid var(--mk-ui-go) !important;
  outline-offset: 4px !important;
}

/* TB-04: ausschließlich der Normalzustand verwendet weiße Schrift. */
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.TB-04 > button:not(.active) {
  background: var(--mk-ui-neutral-bg) !important;
  color: #FFFFFF !important;
}

/* Nur iPhone: Einstellungen-Reitergruppe horizontal zentrieren. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs:is(.TB-03, .TB-04) {
    justify-content: center !important;
  }
}

/* Chat 63w: freigegebene Angleichung an den UI-Master v0.18. */
html.mkStyleguideV014 body.mkStyleguideV014 .TB-01 > button:not(.active) {
  background: #2D3541 !important;
  color: #FFFFFF !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .TB-02 > button:not(.active) {
  color: #FFFFFF !important;
}

/* Schloss und Warenkorb: abgenommene neutrale Zwei-Zustands-Darstellung. */
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AN-W,
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AN-S {
  background: var(--cc-m) !important;
  border: 1px solid #858A91 !important;
  color: #858A91 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AA-W,
html.mkStyleguideV014 body.mkStyleguideV014 .planLine button.planLockBtn.locked.BS-AA-S {
  background: var(--cc-b1) !important;
  border: 2px solid #858A91 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  filter: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AN-W, button.BS-AN-S):not(:disabled):active {
  background: var(--cc-m) !important;
  border: 2px solid #858A91 !important;
  color: #FFFFFF !important;
}
@media (hover: hover) and (pointer: fine) {
  html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AN-W, button.BS-AN-S):not(:disabled):hover {
    background: var(--cc-m) !important;
    border: 2px solid #858A91 !important;
    color: #FFFFFF !important;
  }
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(button.BS-AA-W, button.BS-AA-S):not(:disabled):is(:hover, :active) {
  border-width: 2px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-AN-W[data-mk-icon="cart"] > svg[data-icon] {
  background-image: url("assets/pictograms/ui/cart-muted.svg") !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-AN-W[data-mk-icon="cart"]:not(:disabled):active > svg[data-icon],
html.mkStyleguideV014 body.mkStyleguideV014 .BS-AA-W[data-mk-icon="cart"] > svg[data-icon] {
  background-image: url("assets/pictograms/ui/cart.svg") !important;
}
@media (hover: hover) and (pointer: fine) {
  html.mkStyleguideV014 body.mkStyleguideV014 .BS-AN-W[data-mk-icon="cart"]:not(:disabled):hover > svg[data-icon] {
    background-image: url("assets/pictograms/ui/cart.svg") !important;
  }
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-AN-S[data-mk-icon="lock-open"] > svg[data-icon] {
  background-image: url("assets/pictograms/ui/unlock-muted.svg") !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-AN-S[data-mk-icon="lock-open"]:not(:disabled):active > svg[data-icon] {
  background-image: url("assets/pictograms/ui/unlock-neutral.svg") !important;
}
@media (hover: hover) and (pointer: fine) {
  html.mkStyleguideV014 body.mkStyleguideV014 .BS-AN-S[data-mk-icon="lock-open"]:not(:disabled):hover > svg[data-icon] {
    background-image: url("assets/pictograms/ui/unlock-neutral.svg") !important;
  }
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-AA-S[data-mk-icon="lock-closed"] > svg[data-icon],
html.mkStyleguideV014 body.mkStyleguideV014 .planLine button.planLockBtn.locked.BS-AA-S > svg[data-icon] {
  background-image: url("assets/pictograms/ui/lock-neutral.svg") !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Tagesliste: eine Aktionszeile; nur iPhone mit Magic links und Piktogrammgruppe rechts. */
html.mkStyleguideV014 body.mkStyleguideV014 .planHead .compactActions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .45rem !important;
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions {
    grid-template-columns: none !important;
    width: 100% !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions .magicMasterBtn.BS-DM-M {
    width: auto !important;
    min-width: max-content !important;
    margin-right: auto !important;
  }
}

/* Auswahlkarten: iPad/Desktop mit Ampel und Plus an der rechten Kartenachse. */
@media (min-width: 601px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteCardContent,
  html.mkStyleguideV014 body.mkStyleguideV014 .foodFavoriteCard .favoriteCardContent {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    column-gap: .42rem !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteCardContent .selectionOnlyAction,
  html.mkStyleguideV014 body.mkStyleguideV014 .foodFavoriteCard .favoriteCardContent .selectionOnlyAction {
    grid-area: 1 / 2 / span 8 !important;
    place-self: center end !important;
    width: 54px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: .42rem !important;
    margin: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .selectionOnlyAction .selectionMacroSignal {
    flex: 0 0 7px !important;
    margin: 0 !important;
  }
}

/* Magic AutoKcal: externer Zauberstab in allen drei Zielbuttons, Gruppe rechts. */
html.mkStyleguideV014 body.mkStyleguideV014 .mkAutoKcalGoalPills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: .45rem !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkAutoKcalGoalPill {
  gap: 7px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkAutoKcalGoalPill > img.mkAutoKcalWand {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
}

/* Nur iPhone: Zielrichtungen untereinander und an der rechten Kartenachse. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .mkAutoKcalGoalPills {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

/* Karten in Vergangenheit/Zukunft: variable Aktionszahl ohne rechte Leerspalten. */
html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard:is(.past, .future) .planLine {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard:is(.past, .future) .planLine .planNameCell {
  flex: 1 1 auto !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard:is(.past, .future) .planLine > :is(.planAmountGroup, button) {
  flex: 0 0 auto !important;
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard:is(.past, .future) .planLine {
    flex-wrap: wrap !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard:is(.past, .future) .planLine .planNameCell {
    flex-basis: 100% !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard:is(.past, .future) .planLine .planAmountGroup {
    margin-right: auto !important;
  }
}

/* Nur iPhone: LM-Karten im Dialog „Gericht bearbeiten“ umbrechen nach kcal. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .dishEditDialog .dishIngredientNutrition > .nutritionKcal {
    flex-basis: 100% !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .dishEditDialog .dishIngredientNutrition > .nutritionKcal + .nutritionDivider {
    display: none !important;
  }
}

/* Nur iPhone: Makros der Gesamt-Subkachel beginnen nach dem Label in neuer Zeile. */
.mkStyleguideV014 .dishNutritionMobileBreak { display: none; }
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .dishEditDialog .preview.totalOnly .dishNutritionMobileBreak {
    display: block !important;
  }
}

/* Sichtbar unveränderte Verlinkung im Rechtliches-Text. */
.mkStyleguideV014 .settingsInlineSiteLink {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.mkStyleguideV014 .settingsInlineSiteLink:is(:hover, :focus-visible) {
  color: inherit;
  text-decoration: underline;
}

/* Erfolge-Arbeitsseitenpiktogramm: externe SVG-Datei statt Data-URI. */
html.mkStyleguideV014 body.mkStyleguideV014 .workHeader .tabs .workNavStaticIcon--stats {
  -webkit-mask-image: url("assets/pictograms/ui/erfolge-arbeitsseiten.svg?v=1.2.195.120") !important;
  mask-image: url("assets/pictograms/ui/erfolge-arbeitsseiten.svg?v=1.2.195.120") !important;
}

/* Chat 64w Nachkorrektur: Warenkorb kehrt auf Touch sicher zum grauen Normalpiktogramm zurück. */
@media (hover: none), (pointer: coarse) {
  html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AN-W[data-mk-icon="cart"]:not(:disabled):not(:active) > svg[data-icon] {
    background-image: url("assets/pictograms/ui/cart-muted.svg") !important;
    color: #858A91 !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Nur iPhone: Magic links, flexible Mitte, drei Aktionsbuttons bündig an der rechten Kartenachse. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) repeat(3, 40px) !important;
    column-gap: .45rem !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button {
    margin: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions .magicMasterBtn.BS-DM-M {
    grid-column: 1 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(2) {
    grid-column: 3 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(3) {
    grid-column: 4 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(4) {
    grid-column: 5 !important;
  }
}

/* Nur iPad/Desktop: Karteninhalt als echtes Raster, Ampel plus BS-AG-P rechtsbündig. */
@media (min-width: 601px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteCardContent,
  html.mkStyleguideV014 body.mkStyleguideV014 .foodFavoriteCard .favoriteCardContent {
    display: grid !important;
    grid-template-rows: repeat(8, auto) !important;
    align-items: start !important;
    min-width: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteCardContent > :is(h3, p),
  html.mkStyleguideV014 body.mkStyleguideV014 .foodFavoriteCard .favoriteCardContent > :is(h3, p) {
    grid-column: 1 !important;
    min-width: 0 !important;
  }
}

/* Chat 64w Nachtrag: nur iPad/Desktop, Auswahlkarten brechen nach „pro 100 g/ml:“ um. */
@media (min-width: 601px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteCardContent .selectionNutrition .nutritionPrefix {
    display: block !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.122 – Chat 66w TXT-/CC-System
   - 25 freigegebene TXT-Styles aus Styleguide v0.24
   - feste, deterministische px-Groessen
   - nur drei ausdrueckliche Kompaktvarianten via .is-compact
   - BG-A und AC-04-Textzuordnung
   ========================================================= */

.mkStyleguideV014 {
  --cc-ci: #5CE08A;
  --cc-w: #FFFFFF;
  --cc-g: #AEB8C4;
  --cc-s: #000001;
  --cc-v: #FFCC66;
  --cc-h: #5CE08A;
  --cc-z: #7EA8FF;
  --cc-k: #FF8A3D;
  --cc-f: #D85CC7;
  --cc-kh: #22C7C9;
  --cc-p: #4865FF;
  --cc-a: #FF3232;
  --cc-b: #00A7EB;
  --cc-br: #C98552;
  --cc-si: #C9D0D7;
  --cc-go: #E5BD4E;
  --cc-d: #101214;
  --cc-m: #1A1D20;
  --cc-r: #292C2E;
  --cc-d2: #111315;
  --cc-b1: #2D3541;
  --cc-b2: #2D3541;
  --cc-fs: #000001;
  --cc-fb: #FF00FF;
  --cc-day: var(--cc-h);
}

.mkStyleguideV014 :is(.today, .dayTone.today, .dayAccent.today) { --cc-day: var(--cc-h); }
.mkStyleguideV014 :is(.past, .dayTone.past, .dayAccent.past) { --cc-day: var(--cc-v); }
.mkStyleguideV014 :is(.future, .dayTone.future, .dayAccent.future) { --cc-day: var(--cc-z); }

html.mkStyleguideV014 body.mkStyleguideV014 .txt-hl1-t {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--cc-day) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-hl1-t.is-compact { font-size: 22px !important; }

html.mkStyleguideV014 body.mkStyleguideV014 .txt-hl1-ci {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--cc-ci) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-hl1-ci.is-compact { font-size: 22px !important; }

html.mkStyleguideV014 body.mkStyleguideV014 .txt-hl2-t {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--cc-day) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-sl1-g {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-sl1-t {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cc-day) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-le-w {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg2-ws {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg2-ws.is-status.over { color: var(--cc-a) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg2-ws.is-status.recommended { color: var(--cc-ci) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg2-ws.is-status.under { color: var(--cc-b) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg2-ci {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cc-ci) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg3-off,
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg3-off :is(a, span) {
  font-size: 9px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg1-m {
  font-size: 13px !important;
  font-weight: 400 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg1-m.mkTxtMacroKcal { color: var(--cc-k) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg1-m.mkTxtMacroFat { color: var(--cc-f) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg1-m.mkTxtMacroCarbs { color: var(--cc-kh) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-lg1-m.mkTxtMacroProtein { color: var(--cc-p) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-dkg-g {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-dzk-wr {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-dzk-wr.is-alert { color: var(--cc-a) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-dzg-wr {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-dzg-wr.is-alert { color: var(--cc-a) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 :is(input, textarea, select).txt-fe-w {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(input, textarea).txt-phf-g::placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
  opacity: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-gl-g {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-fl-g {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-kbr-g {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .searchResultNutrition.txt-kbr-g,
html.mkStyleguideV014 body.mkStyleguideV014 .searchResultNutrition.txt-kbr-g :is(span, b, strong) {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-hi-gw {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-hi-gw.is-white {
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-khl-w {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-bz-tma {
  font-size: 64px !important;
  font-weight: 700 !important;
  color: var(--cc-day) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-bz-tma.is-compact { font-size: 40px !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .goalFidelityMetric.nutrient-kcal .txt-bz-tma { color: var(--cc-k) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .goalFidelityMetric.nutrient-fat .txt-bz-tma { color: var(--cc-f) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .goalFidelityMetric.nutrient-carbs .txt-bz-tma { color: var(--cc-kh) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .goalFidelityMetric.nutrient-protein .txt-bz-tma { color: var(--cc-p) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-bz-tma.bmiValue.over { color: var(--cc-a) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-bz-tma.bmiValue.recommended { color: var(--cc-ci) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-bz-tma.bmiValue.under { color: var(--cc-b) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-ct-wgci {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-ct-wgci.is-gray { color: var(--cc-g) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-ct-wgci.is-ci { color: var(--cc-ci) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-ct-wgci.is-bold { font-weight: 700 !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .txt-bt-w {
  font-size: 16.8px !important;
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-tth-g {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .txt-tt-w {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--cc-w) !important;
}

/* BG-A ist ein Badge und ausdruecklich kein TXT-Style. */
html.mkStyleguideV014 body.mkStyleguideV014 .BG-A {
  --bg-a-day: var(--cc-h);
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 27.2px !important;
  min-width: 27.2px !important;
  height: 27.2px !important;
  min-height: 27.2px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--bg-a-day) 58%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bg-a-day) 18%, #0A0E12E6) !important;
  color: var(--bg-a-day) !important;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .BG-A.today { --bg-a-day: var(--cc-h); }
html.mkStyleguideV014 body.mkStyleguideV014 .BG-A.past { --bg-a-day: var(--cc-v); }
html.mkStyleguideV014 body.mkStyleguideV014 .BG-A.future { --bg-a-day: var(--cc-z); }

/* AC-04 behaelt Geometrie und Funktion; nur der Labeltext erhaelt TXT-LG2-W/S. */
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 .ac-label.txt-lg2-ws {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cc-w) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04:is(:hover, :focus-visible) .ac-label.txt-lg2-ws {
  color: var(--cc-ci) !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.124 – Chat 66w Nachkorrektur
   - AutoKcal-Copy weiss nach TXT-CT-W
   - semantisches Rot einheitlich CC-A
   - editierbare Feldflaechen CC-S
   - Gewichtsangabe im Verlauf tagesfarbenabhaengig
   ========================================================= */

html.mkStyleguideV014,
html.mkStyleguideV014 body.mkStyleguideV014 {
  --button-danger-text: var(--cc-a);
}

/* Magic AutoKcal: Shadow-Mode-Text und „Mein Ziel:“ = TXT-CT-W. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.magicAutoKcalNote, .mkAutoKcalGoalLabel).txt-ct-wgci {
  color: var(--cc-w) !important;
}

/* Mein BMI: rotes Segment, Status und Marker-Badge inklusive Pfeiltraeger. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.bmiDonutSegment.over) {
  stroke: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.bmiDonutMarker.over) {
  fill: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.bmiRange.over, .bmiDonutLegend .over::before) {
  background: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.bmiValue.over, .bmiStatus.over) {
  color: var(--cc-a) !important;
}

/* Pflichtfelder: die rote Umrandung ist exakt CC-A. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .invalidInput,
  .invalidBox,
  .dishCookedCard.invalidBox,
  .saveAsDishCookedCard.invalidBox,
  .targetInputRow.fieldInvalid .targetValueWrap > span,
  .targetPill.bad,
  .iconBtn.targetSaveBtn.dirty
) {
  border-color: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .invalidInput,
  .invalidBox
) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-a) 18%, transparent) !important;
}

/* Alle sichtbaren editierbaren Feldflaechen verwenden CC-S = #000001.
   Kontur-, Fokus- und Fehlerfarben bleiben kontextabhaengig. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  textarea,
  select,
  .ingredientTouchSelect
) {
  background-color: var(--cc-s) !important;
}

/* Weitere semantische Rotdarstellungen werden auf CC-A vereinheitlicht. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .error,
  .warning,
  .fieldError,
  .fieldHint,
  .imageDialogError,
  .targetPill.bad,
  .targetInputRow.fieldInvalid .targetValueWrap > span,
  .targetCompactValue.bad,
  .goalWeightCard.bad .goalWeightText,
  .weightList .weightRow.up strong,
  .weightList .weightRow.up span,
  .weightPhaseHeader span.up,
  .mkAutoKcalStopMessage > strong,
  .mkAutoKcalModalError,
  .mkMacroPercentSum.invalid,
  .mkMacroPercentSumNative.invalid,
  .planName em
) {
  color: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .diffGrid .over,
  .sum.bad,
  .weightList .weightRow.up,
  .targetPill.bad,
  .planName em,
  .mkAutoKcalStopMessage,
  .mkAutoKcalSafetyStop,
  .mkAutoKcalSafetyReviewButton,
  .mkMacroPercentSum.invalid
) {
  border-color: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .diffGrid .over,
  .sum.bad,
  .weightList .weightRow.up,
  .targetPill.bad,
  .targetInputRow.fieldInvalid .targetValueWrap > span,
  .planName em,
  .imageCloseBtn,
  .mkAutoKcalStopMessage
) {
  background-color: color-mix(in srgb, var(--cc-a) 10%, transparent) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.btnBadge, .plannerTabBadge) {
  background-color: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .AC-03 .ac-meta.up {
  color: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .iconBtn.targetSaveBtn.dirty {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--cc-a) 28%, transparent),
    0 10px 28px color-mix(in srgb, var(--cc-a) 8%, transparent) !important;
}
/* Die Druck-/Teilen-Ansicht erbt keine App-Rootklasse; deshalb unscoped. */
.shoppingLine,
.shoppingNote {
  color: var(--cc-a, #FF3232) !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.126 – Chat 68 Nachkorrekturen
   ========================================================= */

/* BS-CG-START: aktuelle HOME-Geometrie bleibt Master; nur der freigegebene
   Code, die exakten Zustandsränder und die Textlage werden ergänzt. */
html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START {
  box-sizing: border-box !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #5CE08A99 !important;
  transition: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START:not(:disabled):is(:hover, :active) {
  border-width: 1px !important;
  border-color: #5CE08A !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START > span:not(.mkNcHomeBadge):not(.BG-01) {
  margin-bottom: .5rem !important;
  transform: translateY(-4px) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START .homeTileIcon {
  width: clamp(78px, 10vw, 104px) !important;
  height: clamp(78px, 10vw, 104px) !important;
  margin: .05rem 0 .1rem !important;
  filter: drop-shadow(0 0 9px #5CE08A29) !important;
}
@media (max-width: 560px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START .homeTileIcon {
    width: clamp(68px, 21vw, 92px) !important;
    height: clamp(68px, 21vw, 92px) !important;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START .homeTileIcon {
    width: min(50px, 13vh) !important;
    height: min(50px, 13vh) !important;
    margin: 0 !important;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START .homeTileIcon {
    width: clamp(48px, 8.2vw, 62px) !important;
    height: clamp(48px, 8.2vw, 62px) !important;
  }
}
@media (hover: none), (pointer: coarse) {
  html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START:not(:disabled):not(:active) {
    border-width: 1px !important;
    border-color: #5CE08A99 !important;
  }
}

/* Bestätigen/Haken steht innerhalb jeder Mehrbutton-Aktionsgruppe rechts. */
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-AG-H {
  order: 9999 !important;
}

/* Normale Donuts (außer BMI): Platzhalter-/Trackfarbe zentral CC-R. */
html.mkStyleguideV014 body.mkStyleguideV014 .donutTrack {
  stroke: var(--cc-r) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutMeter.inactive .donutRing {
  --meter-color: var(--cc-r) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutMeter.inactive .donutProgress {
  stroke: var(--cc-r) !important;
}

/* Donuts > 100 %: Track bleibt CC-R, Fortschrittsbogen Makrofarbe; nur die Zahl warnt. */
html.mkStyleguideV014 body.mkStyleguideV014 .donutMeter.over:not(.inactive) .donutTrack {
  stroke: var(--cc-r) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutMeter.over:not(.inactive) .donutProgress {
  stroke: var(--nutrient-color) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutMeter.over:not(.inactive) .donutCenter > strong {
  color: #FF3232 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutMeter.over:not(.inactive) .donutRest {
  color: var(--nutrient-color) !important;
}

/* BMI-Legende: der rote Hinweis-Punkt verwendet exakt das globale Alertrot. */
html.mkStyleguideV014 body.mkStyleguideV014 .bmiDonutLegend .over::before {
  background: #FF3232 !important;
}

/* Alle Phasen: freigegebener einfacher Hinweis ohne Prognose-Subkachel. */
html.mkStyleguideV014 body.mkStyleguideV014 .weightTrendAllPhasesHint {
  margin: .62rem .15rem 0 !important;
  line-height: 1.35 !important;
}

/* AC-04: Label bleibt in sämtlichen Maus-, Tastatur- und Touchzuständen weiß. */
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 .ac-label.txt-lg2-ws,
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04:is(:hover, :focus, :focus-visible, :active) .ac-label.txt-lg2-ws {
  color: #FFFFFF !important;
}

/* Konto-Aktionszeilen bleiben rechtsbündig; Kachel-/Wrappergeometrie wird
   ausschließlich im zentralen Konto-Block weiter unten definiert. */
html.mkStyleguideV014 body.mkStyleguideV014 .accountCustomerActions,
html.mkStyleguideV014 body.mkStyleguideV014 .settingsLegalActions {
  justify-content: flex-end !important;
}

/* Abmelden nutzt die bestehende Serveraktion als nicht-persistenten TG-01. */
html.mkStyleguideV014 body.mkStyleguideV014 .accountLogoutToggleRow > span {
  color: #FFFFFF !important;
}

/* FAQ: Intro wie Backup; Tour folgt sichtbar direkt auf die Subline. */
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard {
  display: flex !important;
  flex-direction: column !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .settingsFaqIntro {
  order: 1;
  margin-top: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .settingsFaqSubline {
  margin: .25rem 0 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .faqActions {
  order: 2;
  margin-top: .7rem !important;
  justify-content: flex-start !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .settingsFaqList {
  order: 3;
}

/* Rechtliches: eine rechtsbündige Buttonreihe, E-Mail zuerst. */
html.mkStyleguideV014 body.mkStyleguideV014 .settingsLegalActions {
  width: 100%;
  margin-top: .7rem !important;
}

/* Feldbeschreibungen bleiben in jedem Zustand unveraendert TXT-FL-G. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .txt-fl-g,
  .fieldInvalid.txt-fl-g,
  .fieldInvalid .txt-fl-g
) {
  color: var(--cc-g) !important;
}

/* Mein Gewichtsverlauf: Gewichtsangabe in der Subkachel nach Tageskontext. */
html.mkStyleguideV014 body.mkStyleguideV014 .dayAccent.past .statisticsWeightStatus strong.txt-dzg-wr {
  color: var(--cc-v) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .dayAccent.today .statisticsWeightStatus strong.txt-dzg-wr {
  color: var(--cc-h) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .dayAccent.future .statisticsWeightStatus strong.txt-dzg-wr {
  color: var(--cc-z) !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.128 – Chat 70w Kachelstyles
   - verbindliche Soft-Graphite-Hierarchie aus Styleguide v0.29.1
   - KA-H-Zeit-/Statusbalken V/H/Z/N
   - Konto ohne zusaetzliche Aussenkachel
   - Einstellungen-Tabs als nicht tagesabhaengiges Segmented-Control
   ========================================================= */

/* KA-H ist geometrisch zentral definiert: Radius 20 px, Hintergrund und 1-px-Kontur.
   KA-S / KA-SS behalten ihre jeweils separat freigegebene Geometrie. */
html.mkStyleguideV014 body.mkStyleguideV014 .KA-H {
  position: relative !important;
  overflow: hidden !important;
  background: var(--cc-d) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--ka-h-accent, var(--cc-ci)) 30%, #ffffff14) !important;
  border-radius: 20px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .KA-H.stickyPlanRest {
  position: sticky !important;
}

/* KA-DN · neutrale Dialog-Hauptkachel.
   Tagesunabhängig; eigener Code, damit der CC-CI-Balken später zentral
   entfernt werden kann, ohne KA-H/KA-HN zu verändern.
   Nur die Kacheldefinition wird vereinheitlicht; Dialoginhalte bleiben unberührt. */
html.mkStyleguideV014 body.mkStyleguideV014 .KA-DN {
  position: relative !important;
  background-color: var(--cc-d) !important;
  background-image: linear-gradient(90deg, var(--cc-ci) 0 5px, transparent 5px) !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: 100% 100% !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--cc-ci) 30%, #ffffff14) !important;
  border-radius: 20px !important;
}
@media (max-width: 760px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .KA-DN {
    background-image: linear-gradient(90deg, var(--cc-ci) 0 4px, transparent 4px) !important;
  }
}
html.mkStyleguideV014 body.mkStyleguideV014 .KA-S {
  background: var(--cc-m) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .KA-SS {
  background: var(--cc-d2) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.favoriteCard.plannedSelectionCard, .searchResultCard.savedResultCard).KA-S {
  border-width: 2px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .KA-F {
  background-color: var(--cc-fs) !important;
}

html.mkStyleguideV014 body.mkStyleguideV014 .KA-HV { --ka-h-accent: var(--cc-v); }
html.mkStyleguideV014 body.mkStyleguideV014 .KA-HH { --ka-h-accent: var(--cc-h); }
html.mkStyleguideV014 body.mkStyleguideV014 .KA-HZ { --ka-h-accent: var(--cc-z); }
html.mkStyleguideV014 body.mkStyleguideV014 .KA-HN { --ka-h-accent: var(--cc-ci); }

html.mkStyleguideV014 body.mkStyleguideV014 .KA-H::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  background: var(--ka-h-accent) !important;
  border-radius: 20px 0 0 20px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
@media (max-width: 760px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .KA-H::before {
    width: 4px !important;
  }
}

/* Konto: EIN zentrales Layoutsystem ohne sichtbare technische Gruppenwrapper.
   KA-H steht immer direkt auf dem Seitenfond. Desktop/iPad: zwei unabhaengige
   Spaltenstapel; links Zugang/Tarif/Premium, rechts Meine Einstellungen. */
html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: .85rem !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsTabbedCard.settingsUnifiedMode > .settingsTabPanel.settingsAccountGrid > :is(.accountOverviewCard, .accountSettingsCard),
html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid > :is(.accountOverviewCard, .accountSettingsCard) {
  display: grid !important;
  gap: .85rem !important;
  align-content: start !important;
  align-self: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid > :is(.accountOverviewCard, .accountSettingsCard)::before {
  content: none !important;
  display: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid > .accountOverviewCard {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid > .accountSettingsCard {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid .accountSubCard {
  position: relative !important;
  align-self: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .contractCard > .accountCustomerCenter {
  padding: .2rem .1rem 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .contractCard > .accountCustomerCenter > p.txt-ct-wgci {
  color: var(--cc-w) !important;
}
@media (max-width: 760px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .settingsAccountGrid > :is(.accountOverviewCard, .accountSettingsCard) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* TB-03: Geometrie wie TB-02, feste CI-Aktivfarbe und kein Tagesbezug. */
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  gap: .35rem !important;
  margin-bottom: 1rem !important;
  padding: .28rem !important;
  border: 1px solid #FFFFFF14 !important;
  border-radius: 999px !important;
  background: #FFFFFF0A !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: .52rem .90rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--cc-w) !important;
  font: 700 16px/1 Inter, ui-sans-serif, system-ui, sans-serif !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button.active {
  background: var(--cc-ci) !important;
  color: #08130C !important;
  box-shadow: 0 6px 16px #5CE08A3D !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 > button:not(.active):is(:hover, :active) {
  background: transparent !important;
  color: var(--cc-w) !important;
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 {
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.135 – Chat 71 KA-H-Balken-Clipping
   - KA-H overflow:hidden zentral gesetzt
   - vertikaler Statusbalken wird dadurch an den 20-px-Kachelradius gebunden
   - keine Seiten-/Komponenten-Sonderregel
   ========================================================= */

/* =========================================================
   MagicKcal AppServer 1.2.195.133 – Chat 71 KA-H-Systembereinigung
   - Tagesliste/Donuts/Datumsanzeige auf CC-D
   - neutrale KA-HN-Kontur CC-CI
   - Dialog-Ausnahmen gezielt bereinigt
   - Konto-Raster, Read-only-Felder und Statistikdetails korrigiert
   ========================================================= */

/* Tagesliste: die Inhalts-Subkachel verwendet die Hauptflaeche CC-D;
   die eigentlichen Listeneintraege bleiben unveraendert KA-S. */
html.mkStyleguideV014 body.mkStyleguideV014 .planBoxCard .planBox {
  background: var(--cc-d) !important;
}

/* Tagesjournal: Innenflaechen der Donuts auf CC-D. */
html.mkStyleguideV014 body.mkStyleguideV014 .donutRing::after {
  background: var(--cc-d) !important;
}

/* Datumsanzeige: Flaeche CC-D; Tagesfarbe bleibt auf Schrift und Kontur. */
html.mkStyleguideV014 body.mkStyleguideV014 .dateButton.BS-BG-D.today,
html.mkStyleguideV014 body.mkStyleguideV014 .dateButton.BS-BG-D.past,
html.mkStyleguideV014 body.mkStyleguideV014 .dateButton.BS-BG-D.future {
  background: var(--cc-d) !important;
}

/* KA-HV / KA-HH / KA-HZ / KA-HN verwenden alle dieselbe zentrale
   1-px-Konturlogik aus .KA-H: jeweilige Akzentfarbe 30 % + #FFFFFF14.
   Fuer KA-HN ist der Akzent semantisch CC-CI. Kein Sonder-/Parallelsystem. */

/* Lebensmittel-Dialog: keine zusaetzliche sichtbare Subkachel. */
html.mkStyleguideV014 body.mkStyleguideV014 .foodEditorTwoColumn.editorBox.mkNewFoodDialog {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Pflichtfelder im Dialog werden erst nach einem Speicherversuch rot.
   Vorher verhalten sie sich wie normale Felder, inkl. CI-Fokus. */
html.mkStyleguideV014 body.mkStyleguideV014 .foodEditorTwoColumn.mkNewFoodDialog:not([data-mk-validation-attempted="true"]) label.fieldInvalid {
  color: var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .foodEditorTwoColumn.mkNewFoodDialog:not([data-mk-validation-attempted="true"]) input.invalidInput {
  border-color: #303846 !important;
  box-shadow: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .foodEditorTwoColumn.mkNewFoodDialog:not([data-mk-validation-attempted="true"]) input.invalidInput:focus {
  border-color: var(--cc-ci) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-ci) 14%, transparent) !important;
}

/* "Als Gericht speichern": editierbares Namensfeld mit Standard-CI-Kontur,
   ohne gedimmten/dicken Fokusrahmen; echter Fehlerzustand bleibt CC-A. */
html.mkStyleguideV014 body.mkStyleguideV014 .saveAsDishModal label > input:not(.invalidInput) {
  border: 1px solid var(--cc-ci) !important;
  box-shadow: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .saveAsDishModal label > input:not(.invalidInput):focus {
  border: 1px solid var(--cc-ci) !important;
  box-shadow: none !important;
}

/* Einstellungen-Reiter: Flaeche exakt wie das TB-02-Segmented-Control
   "Alle Phasen / Aktuelle Phase"; Aktivfarbe bleibt neutral CC-CI. */
html.mkStyleguideV014 body.mkStyleguideV014 .favoriteSubTabs.settingsSubTabs.TB-03 {
  border-color: #FFFFFF14 !important;
  background: #FFFFFF0A !important;
}

/* Erfolge: Zielmedaillen-Subkachel mit derselben 1-px-/Dimmcharakteristik
   wie KA-H; semantische Randfarbe bleibt CC-G. */
html.mkStyleguideV014 body.mkStyleguideV014 .currentMedal.KA-S {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--cc-g) 30%, #ffffff14) !important;
}

/* Mein Gewichtsverlauf: alle Skalenbeschriftungen einheitlich CC-G. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.weightTrendAxisLabel, .weightTrendDateLabel) {
  fill: var(--cc-g) !important;
  color: var(--cc-g) !important;
}

/* Nicht editierbare Felder: globale Systemregel, keine Konto-Ausnahme.
   Feldflaeche BG CC-D, Inhalt CC-G, volle Opazitaet. Editierbare Felder
   bleiben KA-F / CC-FS. Checkbox/Radio/Range/File/Button sind keine Feldflaechen. */
html.mkStyleguideV014 body.mkStyleguideV014 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):is(:disabled, [readonly]),
html.mkStyleguideV014 body.mkStyleguideV014 textarea:is(:disabled, [readonly]),
html.mkStyleguideV014 body.mkStyleguideV014 select:disabled {
  background-color: var(--cc-d) !important;
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
  opacity: 1 !important;
}

/* Tagesziele Desktop/iPad: Magic AutoKcal visuell direkt unter Meine Tagesziele. */
@media (min-width: 761px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsGrid .targetWeightCombinedCard {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsGrid .targetsCardCompact {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsGrid .magicAutoKcalCard {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}


/* =========================================================
   MagicKcal AppServer 1.2.195.140 – Chat 71 TG-01 Sichtkorrektur
   - ausschließlich TG-01: OFF CC-B2 / ON CC-CI / Thumb CC-W
   - Geometrie 64×30 px, Padding 4 px, Thumb 34×22 px, Shift 22 px
   - Legacy .tipSwitch-Verlauf/-Schatten durch bestehenden TG-Master neutralisiert
   - Login-X nutzt BS-AA-X-Mastergeometrie; TG-01 ohne Verbotscursor; sonst keine UI-Aenderung
   ========================================================= */
/* =========================================================
   MagicKcal AppServer 1.2.195.141 – Chat 71 Abschlusskorrektur
   - FAQ-Antworttexte und Rechtliches-Copy: weiße TXT-CT-Variante
   - Login-Schließen explizit BS-AA-X über DOM-Zuordnung
   - BMI-Zentralwert immer mit exakt einer Dezimalstelle
   - sonst keine Styleänderung
   ========================================================= */

/* =========================================================
   MagicKcal AppServer 1.2.195.142 – Chat 72 Feinabstimmung
   - Login-X ist BS-AA-X mit externem X-Piktogramm; Overlay-Klick schließt nicht.
   - Donut-Platzhalter normaler Donuts = CC-R #292C2E (BMI ausgenommen).
   - Ampelpunkte: neutral CC-B2; aktiv CC-K / CC-F / CC-KH / CC-P.
   - iPhone/iPad editierbare Felder: CC-FS + CC-W; Read-only unverändert.
   - BS-CG-KC: Legacy-Weißmaske entfernt; nur grünes externes Piktogramm.
   - iPhone Tagesliste: regulärer sichtbarer Kachelabstand und Auswahl-Topabschluss.
   ========================================================= */

/* Login-X: Mastergröße und externes Piktogramm ohne Text-Ersatzzeichen. */
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] button.BS-AA-X.dialogRoundBtn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  font-size: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] button.BS-AA-X.dialogRoundBtn > .mkUiIcon[data-mk-icon="x"] {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

/* BS-CG-KC: altes weißes Masken-Piktogramm vollständig neutralisieren. */
html.mkStyleguideV014 body.mkStyleguideV014 .accountKcButton.BS-CG-KC::before {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  background-color: transparent !important;
  background-image: url("assets/pictograms/ui/kundencenter-go.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* Ampel: neutral immer CC-B2; aktive Positionen folgen ausschließlich den Makrofarben. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.selectionMacroDot, .nutritionSignalSegment):not(.active) {
  background: var(--cc-b2) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.selectionMacroDot, .nutritionSignalSegment).active.nutrient-kcal {
  background: var(--cc-k) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.selectionMacroDot, .nutritionSignalSegment).active.nutrient-fat {
  background: var(--cc-f) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.selectionMacroDot, .nutritionSignalSegment).active.nutrient-carbs {
  background: var(--cc-kh) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.selectionMacroDot, .nutritionSignalSegment).active.nutrient-protein {
  background: var(--cc-p) !important;
}

/* iPhone/iPad: editierbare Felder = CC-FS mit weißem Nutzwert. Read-only bleibt global CC-D/CC-G. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not([readonly]),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 textarea:not(:disabled):not([readonly]),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 select:not(:disabled) {
  background-color: var(--cc-fs) !important;
  color: var(--cc-w) !important;
  -webkit-text-fill-color: var(--cc-w) !important;
  opacity: 1 !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not([readonly])::placeholder,
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 textarea:not(:disabled):not([readonly])::placeholder {
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
  opacity: 1 !important;
}

/* iPhone Tagesliste: effektiven sichtbaren Kachelabstand auf den üblichen Rhythmus anheben. */
@media (max-width: 600px) and (orientation: portrait) {
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerGrid .stickyPlanRest:not(.plannerMobilePaneHidden) + .planBoxCard:not(.plannerMobilePaneHidden) {
    margin-top: .45rem !important;
  }
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerGrid .favoriteLibraryCard:not(.plannerMobilePaneHidden) {
    margin-top: .45rem !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.143 – Chat 72 Nachkorrektur
   - Login BS-AA-X: externes X als echtes IMG; Preauth-Backdrop ohne Safari-Blur-Blackout.
   - iPhone/iPad editierbare Touch-Felder: CC-FS + CC-W, inklusive Quantity-Wheel-Quellen.
   - native Date-Inputs bleiben unsichtbar; BS-BG-D bleibt sichtbar, iPad-Zifferartefakt entfällt.
   - iPhone Auswahl treffen: erster Auswahl-Kachelabschluss wird unter Sticky-Tabs freigestellt.
   - Ampelfarbzuordnung aus 1.2.195.142 bleibt unverändert verbindlich.
   ========================================================= */

/* Login: BS-AA-X zeigt das externe X deterministisch als IMG. */
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] button.BS-AA-X.dialogRoundBtn > img.mkLoginCloseIcon {
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  object-fit: contain !important;
  background: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Nur Preauth-Login: Safari-Backdrop-Blur vermeiden; HOME bleibt sichtbar und montiert. */
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"].modalBackdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0, 0, 1, .62) !important;
  touch-action: manipulation !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginPanel {
  touch-action: pan-y !important;
}

/* iPhone/iPad: funktional editierbare Touch-Mengenfelder sind im React-
   Touchmodus absichtlich readonly und öffnen das Wheel. Sie bleiben deshalb
   visuell editierbare CC-FS/CC-W-Felder. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 input[readonly][inputmode]:not(:disabled):not(.nativeDateInput),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .ingredientTouchSelect:not(:disabled),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .mkAutoKcalTouchValue:not(:disabled) {
  background-color: var(--cc-fs) !important;
  color: var(--cc-w) !important;
  -webkit-text-fill-color: var(--cc-w) !important;
  opacity: 1 !important;
}

/* Header-Datum: nativen date-Input auf iPhone/iPad vollständig aus der
   sichtbaren Ebene halten. Der sichtbare Button bleibt BS-BG-D. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav .nativeDateInput {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  overflow: hidden !important;
  inset: auto !important;
}

/* iPhone Tagesliste > Auswahl treffen: der Sticky-Tab-Schatten darf den
   oberen Rand der ersten sichtbaren Auswahlkachel nicht überdecken. */
@media (max-width: 600px) and (orientation: portrait) {
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerMobileTabsStandalone {
    box-shadow: 0 -12px 0 #000001, 0 10px 0 #000001 !important;
  }
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerGrid .favoriteLibraryCard:not(.plannerMobilePaneHidden) {
    margin-top: .45rem !important;
  }
}



/* =========================================================
   MagicKcal AppServer 1.2.195.144 – Chat 72 weitere Nachkorrektur
   - Preauth-Login: Außenereignisse vollständig abgefangen; gesperrtes HOME bleibt als Untergrund erhalten.
   - iPhone/iPad: alle funktional editierbaren Felder CC-FS/CC-W; native Datumsfelder ausgeschlossen.
   - Desktop: „Neues Lebensmittel anlegen“ ebenfalls CC-FS/CC-W.
   - iPhone/iPad: nativer Header-Dateinput vollständig ausgeblendet; kein iPad-Zifferartefakt.
   - iPhone/iPad: Wheel-Aktionen horizontal, Reihenfolge BS-AA-X links / BS-AG-H rechts.
   ========================================================= */

/* iPhone/iPad: funktional editierbare Felder vollständig erfassen. Oi-Touchfelder
   sind technisch readonly, bleiben aber fachlich editierbar. Disabled-Felder in
   „Meine Zugangsdaten“ und „Mein Tarif“ bleiben von dieser Regel ausgenommen. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not(.nativeDateInput),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 textarea:not(:disabled),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 select:not(:disabled) {
  background-color: var(--cc-fs) !important;
  color: var(--cc-w) !important;
  -webkit-text-fill-color: var(--cc-w) !important;
  opacity: 1 !important;
}

/* Desktop-Ausnahme laut Chat 72: „Neues Lebensmittel anlegen“ verwendet ebenfalls
   CC-FS / CC-W. Die mkNewFoodDialog-Klasse wird deterministisch aus der Dialog-HL gesetzt. */
html.mkStyleguideV014:not(.mkIPhone):not(.mkIPad) body.mkStyleguideV014 .mkNewFoodDialog input:not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled),
html.mkStyleguideV014:not(.mkIPhone):not(.mkIPad) body.mkStyleguideV014 .mkNewFoodDialog textarea:not(:disabled),
html.mkStyleguideV014:not(.mkIPhone):not(.mkIPad) body.mkStyleguideV014 .mkNewFoodDialog select:not(:disabled) {
  background-color: var(--cc-fs) !important;
  color: var(--cc-w) !important;
  -webkit-text-fill-color: var(--cc-w) !important;
  opacity: 1 !important;
}

/* Header-Datum iPhone/iPad: der technische native Date-Input hat keinerlei sichtbare
   Geometrie. Die Datumsauswahl läuft über den sichtbaren BS-BG-D / Custom Calendar. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .compactWorkDateNav .nativeDateInput {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* iPhone/iPad Wheel: zwei runde Aktionen nebeneinander; visuelle Reihenfolge
   BS-AA-X links, BS-AG-H rechts. DOM bleibt unverändert. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelPanelCompact {
  width: min(292px, calc(100% - 1rem)) !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelCompactRow {
  grid-template-columns: minmax(0, 168px) auto !important;
  align-items: center !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelActions {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  width: max-content !important;
}


/* =========================================================
   MagicKcal AppServer 1.2.195.145 – Chat 72 letzte Nachkorrektur
   - iPhone/iPad: „Neues Lebensmittel anlegen“ editierbare Felder CC-FS/CC-W.
   - iPhone/iPad: Wheel-Reihenfolge deterministisch BS-AA-X links / BS-AG-H rechts.
   ========================================================= */

/* Nur iPhone/iPad und nur Dialog „Neues Lebensmittel anlegen“:
   editierbare Felder verwenden CC-FS, Nutzwert CC-W. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014
  .foodEditorTwoColumn.mkNewFoodDialog .foodEditorFormGrid input:not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014
  .foodEditorTwoColumn.mkNewFoodDialog .foodEditorFormGrid textarea:not(:disabled),
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014
  .foodEditorTwoColumn.mkNewFoodDialog .foodEditorFormGrid select:not(:disabled) {
  background-color: var(--cc-fs) !important;
  color: var(--cc-w) !important;
  -webkit-text-fill-color: var(--cc-w) !important;
  opacity: 1 !important;
}

/* Nur iPhone/iPad Wheel: visuelle Reihenfolge eindeutig festlegen. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelActions {
  flex-direction: row !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelActions .quantityWheelCancel {
  order: 1 !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelActions .quantityWheelClose {
  order: 2 !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.146 – Chat 72 Nachkorrektur
   - iPhone/iPad: „Neues Lebensmittel anlegen“ Nutzwert-Schrift explizit CC-W.
   - iPhone/iPad: Wheel im Dialog zentriert; BS-AA-X / BS-AG-H rechts daneben.
   - Sonst keine Layout-/Fachlogikänderung.
   ========================================================= */

/* Wheel: das Auswahlrad selbst liegt exakt in der Dialogmitte. Die bereits
   korrekte Buttonreihenfolge bleibt rechts direkt daneben stehen. */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelPanelCompact {
  width: min(360px, calc(100% - 1rem)) !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelCompactRow {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelViewport {
  flex: 0 0 168px !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 .quantityWheelActions {
  position: absolute !important;
  left: calc(50% + 92px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.147 – Chat 72 letzte Desktop-Placeholder-Korrektur
   - Nur Desktop: Dialog „Neues Lebensmittel anlegen“.
   - Placeholder verwenden TXT-PHF-G; Nutzwerte und alle anderen Bereiche bleiben unverändert.
   ========================================================= */

/* Desktop · „Neues Lebensmittel anlegen“:
   TXT-PHF-G auch in Safari deterministisch durchsetzen. */
html.mkStyleguideV014:not(.mkIPhone):not(.mkIPad) body.mkStyleguideV014
  .foodEditorTwoColumn.mkNewFoodDialog .foodEditorFormGrid :is(input, textarea).txt-phf-g::placeholder {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
  opacity: 1 !important;
}



/* =========================================================
   MagicKcal AppServer 1.2.195.149 – Chat 72 Dialog-Kachelsystem
   - ausschließlich Kacheldefinitionen in Dialogen vereinheitlicht.
   - Dialog-Hauptkachel = KA-DN: CC-D, 1-px-CC-CI-Dimmkontur, Radius 20 px, CC-CI-Balken.
   - sichtbare vorhandene Dialog-Unterkacheln nach bestehender Hierarchie KA-S / KA-SS.
   - Dialoginhalte, Texte, TXT-Styles, Buttons, Piktogramme, Felder, Placeholder und Logik unverändert.
   ========================================================= */

/* =========================================================
   MagicKcal AppServer 1.2.195.150 – Chat 72 Dialog-Nachkorrektur
   - Nur iPhone: HL in „Gebuchte Positionen teilen“ und „Meine Tagesliste teilen“
     auf normalen oberen Dialogabstand gesetzt.
   - „Lebensmittel bearbeiten“: sichtbare innere Editor-Kachel entfernt;
     Inhalte bleiben unverändert direkt auf KA-DN, vorhandene Bild-Subkachel bleibt KA-S.
   - „Gericht bearbeiten“: Bild-/Button-Wrapper und „Zutaten im Gericht“-Wrapper
     als sichtbare Kacheln entfernt; Zutatenzeilen von KA-SS auf KA-S gehoben.
   - Ausschließlich Kachel-/Abstandsstruktur; Inhalte und Funktionen unverändert.
   ========================================================= */

/* iPhone: nur die zwei geprüften Tageslisten-/Journal-Teilen-Dialoge.
   1rem entspricht dem regulären oberen Innenabstand von .modalPanel. */
@media (max-width: 600px) and (orientation: portrait) {
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .shareModalPanel.mkShareListDialog {
    padding-top: 1rem !important;
  }
}

/* Freigegebene Dialog-Wrapper vollständig entkacheln, ohne Inhalte umzubauen. */
html.mkStyleguideV014 body.mkStyleguideV014 .modalPanel .mkDialogFlatCard {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Lebensmittel bearbeiten: der ehemalige innere Editor-Kachelrahmen entfällt;
   der Inhalt beginnt direkt auf KA-DN. */
html.mkStyleguideV014 body.mkStyleguideV014 .modalPanel .foodEditorTwoColumn.favoriteFoodEditor.mkFavoriteFoodEditorFlat {
  margin-top: 0 !important;
}


/* =========================================================
   MagicKcal AppServer 1.2.195.153 – .com-Runde Begleitkorrektur App-TXT
   Freigabe 16.09.2026
   - FAQ Accordion-Copy = TXT-CT-G; Summary/Frage bleibt CC-CI.
   - Einstellungen > Rechtliches = TXT-CT-W/G: 400 CC-G, 700 CC-W.
   - Keine Inhalts-, Layout-, Button-, Feld- oder Funktionsaenderung.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .settingsFaqItem > summary {
  color:var(--cc-ci) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .settingsFaqItem > p,
html.mkStyleguideV014 body.mkStyleguideV014 .faqCard .settingsFaqItem > div > p {
  font-size:16px !important;
  font-weight:400 !important;
  color:var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsInfoCard .settingsInfoText > p {
  font-size:16px !important;
  font-weight:400 !important;
  color:var(--cc-g) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .settingsInfoCard .settingsInfoText > p > strong {
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--cc-w) !important;
}


/* =========================================================
   MagicKcal AppServer 1.2.195.155 – Chat 74 Kleine App-Anpassungen
   - Tagesziele: berechnete kcal/g-Werte CC-G; Makro-Summe als TXT-FL-G-Label + Read-only-Feld CC-D/CC-G, bei !=100 % Schrift CC-A.
   - iPad Hochformat: Eingabefelder in Meine Tagesziele kuerzer und weiter rechts, damit Feldlabels frei bleiben.
   - Magic-Hinweis: entsperrter Eintragsname Bold/CC-W; Makroquelle behaelt Ampel-Bullet + CC-F/CC-KH/CC-P.
   - Tageslisten-Diagnosebutton entfernt; iPhone-Aktionsraster auf Als Gericht + Teilen angepasst.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap > span {
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
}

html.mkStyleguideV014 body.mkStyleguideV014 .mkMacroPercentSumNative {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 5.8rem !important;
  align-items: center !important;
  gap: .55rem !important;
  justify-content: initial !important;
  min-height: 40px !important;
  margin-top: .1rem !important;
  padding: 0 !important;
  color: var(--cc-g) !important;
  font-weight: 400 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkMacroPercentSumLabel {
  color: var(--cc-g) !important;
  font-weight: 400 !important;
  text-align: left !important;
  white-space: normal !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkMacroPercentSumValue {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 5.8rem !important;
  min-width: 5.8rem !important;
  height: 40px !important;
  padding: .55rem .68rem !important;
  border: 1px solid var(--cc-fk, #303846) !important;
  border-radius: 10px !important;
  background: var(--cc-d) !important;
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
  font-weight: 700 !important;
  text-align: right !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkMacroPercentSumNative.invalid .mkMacroPercentSumValue {
  color: var(--cc-a) !important;
  -webkit-text-fill-color: var(--cc-a) !important;
}

html.mkStyleguideV014 body.mkStyleguideV014 .magicUnlockEntryName {
  color: var(--cc-w) !important;
  font-weight: 700 !important;
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetInputInline {
    grid-template-columns: minmax(150px, 1fr) auto !important;
    column-gap: .8rem !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap,
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .compactTargetFields .targetInputRow:first-child .targetValueWrap {
    grid-template-columns: 5.8rem minmax(5.8rem, auto) !important;
    width: auto !important;
    justify-content: end !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap input,
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .compactTargetFields .targetInputRow:first-child input {
    width: 5.8rem !important;
    min-width: 5.8rem !important;
    max-width: 5.8rem !important;
  }
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions {
    grid-template-columns: max-content minmax(0, 1fr) repeat(2, 40px) !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(2) {
    grid-column: 3 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(3) {
    grid-column: 4 !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.156 – Chat 74 iPad-Hochformat Nachkorrektur
   - Nur iPad Hochformat / Meine Tagesziele.
   - Berechnete kcal-/g-Werte erhalten rechts wieder sauberen Kachel-Innenabstand.
   - Makro-Summenfeld steht in derselben Spalte direkt unter den editierbaren Prozentfeldern.
   - iPhone, iPad quer und Desktop bleiben unveraendert.
   ========================================================= */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap > span {
    padding-right: 1rem !important;
  }

  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative {
    --target-number-box: clamp(6.4rem, 15vw, 7.2rem);
    grid-template-columns: minmax(150px, 1fr) .8rem 5.8rem calc(.55rem + var(--target-number-box)) !important;
    column-gap: 0 !important;
    margin-top: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumLabel {
    grid-column: 1 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumValue {
    grid-column: 3 !important;
    justify-self: stretch !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.157 – Chat 74 Abschlusskorrektur
   - iPad quer: Makro-Summenfeld steht unter der editierbaren Prozentfeld-Spalte.
   - iPad hoch: berechnete kcal-/g-Werte werden nur optisch nach links eingerückt,
     damit der rechte Kachel-Innenabstand erhalten bleibt; Eingabefelder bleiben unverändert.
   - Preauth-Login: Safari/WebKit-Autofill behält seinen hellen Autofill-Hintergrund,
     Eingabetext/Punkte werden darauf mit CC-S dargestellt und bleiben lesbar.
   ========================================================= */
@media (orientation: landscape) {
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative {
    --target-number-box: clamp(6.4rem, 15vw, 7.2rem);
    grid-template-columns: minmax(0, 1fr) .7rem var(--target-number-box) .55rem var(--target-number-box) !important;
    column-gap: 0 !important;
    margin-top: 0 !important;
  }
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumLabel {
    grid-column: 1 !important;
  }
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumValue {
    grid-column: 3 !important;
    justify-self: stretch !important;
    width: var(--target-number-box) !important;
    min-width: var(--target-number-box) !important;
    max-width: var(--target-number-box) !important;
  }
}

@media (orientation: portrait) {
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap > span {
    transform: translateX(-1rem) !important;
  }
}

html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:-webkit-autofill,
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:-webkit-autofill:hover,
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:-webkit-autofill:focus {
  color: var(--cc-s) !important;
  -webkit-text-fill-color: var(--cc-s) !important;
  caret-color: var(--cc-s) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:autofill {
  color: var(--cc-s) !important;
  -webkit-text-fill-color: var(--cc-s) !important;
  caret-color: var(--cc-s) !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.158 – Chat 74 iPad-Hochformat Abschluss
   - Meine Tagesziele: nur iPad hoch. Berechnete kcal-/g-Werte erhalten
     einen echten rechten Innenabstand, ohne die editierbaren Felder zu verschieben.
   - HOME: nur iPad hoch. Sechs Bereichskacheln stehen in 2 Spalten x 3 Reihen.
   - iPad quer, iPhone, Desktop, Login/KCclient und Fachlogik bleiben unveraendert.
   ========================================================= */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap,
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .compactTargetFields .targetInputRow:first-child .targetValueWrap {
    grid-template-columns: 5.8rem 6.2rem .45rem !important;
    column-gap: .55rem !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: end !important;
    justify-content: initial !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap > .autoSaveInputShell,
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .compactTargetFields .targetInputRow:first-child .targetValueWrap > .autoSaveInputShell {
    grid-column: 1 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetValueWrap > span {
    grid-column: 2 !important;
    box-sizing: border-box !important;
    width: 6.2rem !important;
    min-width: 6.2rem !important;
    max-width: 6.2rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    transform: none !important;
  }
}

@media (orientation: portrait) and (min-width: 700px) and (max-width: 1180px) and (min-height: 501px) {
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .homeApp .homeNav {
    grid-template-columns: repeat(2, var(--home-tile-size)) !important;
  }
}


/* =========================================================
   MagicKcal AppServer 1.2.195.161 – Chat 75 Login-Autofill Touch-Nachkorrektur
   - Nur iPhone/iPad Preauth-Login.
   - Safari/WebKit-Autofill behaelt den hellen Systemhintergrund.
   - Eingabetext und Passwortpunkte werden darauf wie auf Desktop in CC-S dargestellt.
   - Desktop, Feldgeometrie, Loginlogik und sonstige Touch-Felder bleiben unveraendert.
   ========================================================= */
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not([readonly]):-webkit-autofill,
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not([readonly]):-webkit-autofill:hover,
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not([readonly]):-webkit-autofill:focus {
  color: var(--cc-s) !important;
  -webkit-text-fill-color: var(--cc-s) !important;
  caret-color: var(--cc-s) !important;
}
:is(html.mkIPhone, html.mkIPad).mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginField input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(:disabled):not([readonly]):autofill {
  color: var(--cc-s) !important;
  -webkit-text-fill-color: var(--cc-s) !important;
  caret-color: var(--cc-s) !important;
}

/* =========================================================
   MagicKcal AppServer 1.2.195.163 – Chat 75 App-Login / Preauth-Update-Guard
   - Nur App-Preauth-Login; .com/KC bleibt unveraendert.
   - Passwort-Auge auf Desktop, iPad und iPhone sichtbar.
   - Externes SVG in CC-S; Funktion Passwort anzeigen/verbergen.
   - Feldgeometrie bleibt erhalten; nur rechter Innenraum fuer das Auge reserviert.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginPasswordField {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginPasswordField > input {
  padding-right: 50px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginPasswordToggle.FB-N-A {
  z-index: 2 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-login="1"] .authLoginPasswordToggle.FB-N-A > .customer-password-eye {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  opacity: 1 !important;
  pointer-events: none !important;
}



/* =========================================================
   MagicKcal AppServer 1.2.195.166 – Chat 76 UI-Runde 1
   - TL-G: einheitliche 1-px-Trennlinie in CC-G.
   - AC-04: Chevron links wie bei den übrigen Accordion-Styles.
   - Tagesziele: Makro-Summe ohne Prozentzeichen im Wert, Summenfeld unter der Eingabespalte,
     rechte berechnete Spalte bei Makrofehlern transparent; Tipps als AC-02 einklappbar.
   - Vergangenheit/Zukunft: gesperrte Funktionen nur noch über Schloss CC-A + TXT-TT-W Tooltip.
   - BG-A in Erfolge wird robust aus dem V/H/Z-Tageskontext gespeist.
   ========================================================= */


html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 {
  justify-content: flex-start !important;
  gap: .34rem !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 .ac-chevron {
  order: -1 !important;
  flex: none !important;
}

/* Tagesziele: Summenwert immer in der Eingabespalte. */
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative {
  grid-template-columns: minmax(0, 1fr) .55rem 5.8rem minmax(0, auto) !important;
  column-gap: 0 !important;
  margin-top: .1rem !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumLabel {
  grid-column: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumValue {
  grid-column: 3 !important;
  justify-self: stretch !important;
}

/* Rechts berechnete kcal/g-Spalte: bei Makrofehler kein blassrotes Feld mehr. */
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetInputRow.fieldInvalid .targetValueWrap > span {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
  box-shadow: none !important;
}

/* Tipps-Accordion nutzt AC-02 und bewahrt die vorhandene Copyformatierung. */
html.mkStyleguideV014 body.mkStyleguideV014 .targetOrientation .mkTargetTipsToggle {
  color: var(--cc-w) !important;
  font-weight: 700 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetOrientation .mkTargetTipsToggle .ac-text,
html.mkStyleguideV014 body.mkStyleguideV014 .targetOrientation .mkTargetTipsToggle:is(:hover, :focus-visible) .ac-text {
  text-decoration: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetOrientation .mkTargetTipsBody {
  display: grid;
  gap: .34rem;
  margin-top: .45rem;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetOrientation .mkTargetTipsBody[hidden] {
  display: none !important;
}

/* Gesperrte Kachel-Funktion: Schloss oben rechts, bewusst ohne Buttonfläche. */
html.mkStyleguideV014 body.mkStyleguideV014 .mkUnavailableLock {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 3 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-a) !important;
  outline: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkUnavailableLock .mkUiIcon[data-mk-icon="lock-closed"] {
  width: 20px !important;
  height: 20px !important;
  background-image: url("assets/pictograms/ui/lock-alert.svg") !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkUnavailableLock:focus-visible {
  outline: 1px solid var(--cc-a) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* BG-A: nicht von Trendrichtung, sondern ausschließlich vom Tageskontext färben. */
html.mkStyleguideV014 body.mkStyleguideV014 .dayAccent.past .BG-A { --bg-a-day: var(--cc-v) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .dayAccent.today .BG-A { --bg-a-day: var(--cc-h) !important; }
html.mkStyleguideV014 body.mkStyleguideV014 .dayAccent.future .BG-A { --bg-a-day: var(--cc-z) !important; }

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative {
    --target-number-box: 5.8rem;
    grid-template-columns: minmax(150px, 1fr) .8rem var(--target-number-box) calc(.55rem + 6.2rem) !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumValue {
    width: var(--target-number-box) !important;
    min-width: var(--target-number-box) !important;
    max-width: var(--target-number-box) !important;
  }
}

@media (orientation: landscape) {
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative {
    --target-number-box: clamp(6.4rem, 15vw, 7.2rem);
    grid-template-columns: minmax(0, 1fr) .7rem var(--target-number-box) calc(.55rem + var(--target-number-box)) !important;
  }
}

.mkStyleguideV014 .mkTargetTipsDetails > summary::-webkit-details-marker { display: none; }
.mkStyleguideV014 .mkTargetTipsDetails > summary::marker { content: ""; }
.mkStyleguideV014 .mkTargetTipsDetails[open] > .mkTargetTipsToggle .ac-chevron { transform: rotate(90deg); }

/* Chat 76 · Makro-Summe finale Ausrichtung
   Die Summenzeile nutzt dieselbe Struktur wie die vier Tagesziel-/Makrozeilen.
   Dadurch folgt das Summenfeld auf allen Breakpoints exakt der editierbaren Feldspalte. */
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative.targetInputInline {
  display: grid !important;
  grid-template-columns: minmax(128px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .55rem !important;
  min-height: 40px !important;
  margin-top: .1rem !important;
  padding: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative .mkMacroPercentSumLabel {
  grid-column: auto !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumWrap {
  min-width: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumShell {
  width: 100% !important;
  min-width: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumShell .mkMacroPercentSumValue {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  padding: .55rem .68rem !important;
  border: 1px solid var(--cc-fk, #303846) !important;
  border-radius: 10px !important;
  background: var(--cc-d) !important;
  color: var(--cc-g) !important;
  -webkit-text-fill-color: var(--cc-g) !important;
  font-weight: 700 !important;
  text-align: right !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative.invalid .mkMacroPercentSumShell .mkMacroPercentSumValue {
  color: var(--cc-a) !important;
  -webkit-text-fill-color: var(--cc-a) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumCalculatedSpacer {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative.targetInputInline {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative.targetInputInline {
    grid-template-columns: minmax(150px, 1fr) auto !important;
    column-gap: .8rem !important;
    margin-top: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative .mkMacroPercentSumLabel {
    grid-column: auto !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumShell .mkMacroPercentSumValue {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (orientation: landscape) {
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative.targetInputInline {
    grid-template-columns: minmax(128px, auto) minmax(0, 1fr) !important;
    column-gap: .55rem !important;
    margin-top: .1rem !important;
  }
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative .mkMacroPercentSumLabel {
    grid-column: auto !important;
  }
  html.mkIPad.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumShell .mkMacroPercentSumValue {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.169 – Chat 76 UI-Nachkorrektur
   - TL-R ersetzt TL-G: 1 px / CC-R #292C2E.
   - Tagesziele Touch: Makro-Summe folgt Wheel-Vorschau live; Makrofelder zeigen Dezimalkomma.
   - iPhone: Makro-Summenfeld bleibt hinter dem Feldlabel in derselben Zeile.
   - Tipps: Abstand zum unteren Kachelrand reduziert.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 .TL-R {
  border-top: 1px solid var(--cc-r, #292C2E) !important;
}

html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .targetOrientation.mkTargetTipsDetails {
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .targetsCardCompact .mkMacroPercentSumNative.targetInputInline {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
}

/* =========================================================
   MagicKcal AppServer 1.2.195.169 – Withings B4
   - Herkunftsmarker in „Meine Körperdaten“: Sync-Piktogramm ohne Buttonfläche.
   - Farbe folgt ausschließlich dem Tageskontext über --cc-day.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 .mkWithingsSync {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  z-index: 3 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cc-day) !important;
  pointer-events: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .mkWithingsSync .mkUiIcon[data-mk-icon="cloud"] {
  width: 20px !important;
  height: 20px !important;
  background-image: none !important;
  background-color: var(--cc-day) !important;
  -webkit-mask: url("assets/pictograms/ui/cloud.svg") center / contain no-repeat !important;
  mask: url("assets/pictograms/ui/cloud.svg") center / contain no-repeat !important;
}


/* =========================================================
   MagicKcal Styleguide v0.29.28 / AppServer 1.2.195.207 – Chat 79
   - BS-BNG: Wochentag-Kombination OFF = BS-BN / ON = BS-BG.
   - iPhone Tageslisten-Tabs explizit als erste Grid-Zeile + Safari-Sticky-Härtung.
   - Magermasse-Piktogramm auf Ollys finales externes SVG umgestellt.
   ========================================================= */

/* BS-BNG: 40-x-40-Textbutton für Wochentage.
   OFF folgt BS-BN (Neutral), ON folgt BS-BG (Go):
   Hintergrund bleibt CC-B2; nur die semantische Kontur wechselt Neutral -> CI.
   Wochentag-Typografie folgt TXT-HI-W: 14 px / 700 / CC-W. */
html.mkStyleguideV014 body.mkStyleguideV014 .BS-BNG {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 40px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--mk-ui-neutral-border) !important;
  border-radius: 50% !important;
  background: var(--cc-b2) !important;
  color: var(--cc-w) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: none !important;
  box-shadow: none !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-BNG:is(.active,[aria-pressed="true"]) {
  border-color: var(--cc-ci) !important;
  background: var(--cc-b2) !important;
  color: var(--cc-w) !important;
}
@media (hover:hover) and (pointer:fine) {
  html.mkStyleguideV014 body.mkStyleguideV014 .BS-BNG:not(:disabled):hover {
    border-width: 2px !important;
  }
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-BNG:not(:disabled):active {
  border-width: 2px !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .BS-BNG:focus-visible {
  outline: 3px solid var(--cc-ci) !important;
  outline-offset: 4px !important;
}

/* iPhone Tagesliste: Reiter bleiben sicher VOR dem Tagesstand und kleben in Safari
   als eigene erste Grid-Zeile direkt unter dem zweizeiligen WorkHeader. */
@media (max-width: 600px) and (orientation: portrait) {
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerGrid > .plannerMobileTabsStandalone {
    grid-row: 1 !important;
    align-self: start !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 108px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerGrid > .stickyPlanRest:not(.plannerMobilePaneHidden) {
    align-self: start !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 162px !important;
  }
}

/* Finale Magermasse-Grafik von Olly; externes SVG bleibt die einzige Bildquelle. */
html.mkStyleguideV014 body.mkStyleguideV014 .bodyCompositionAnalyticsIcon.lean:before {
  -webkit-mask-image: url('/assets/pictograms/body/lean.svg?v=1.2.195.215') !important;
  mask-image: url('/assets/pictograms/body/lean.svg?v=1.2.195.215') !important;
}


/* =========================================================
   MagicKcal Styleguide v0.29.31 / AppServer 1.2.195.207 – Chat 79
   - BG-01 ist der einzige visuelle Zähler-/Notification-Badge-Style.
   - CC-A / CC-W / 22 px / dynamische Breite / ohne Schatten oder Glow.
   - Einheitliche Flex-Zentrierung; keine Value-Wrapper oder iPhone-Offsets.
   - HOME-Textregeln schließen BG-01 explizit aus.
   ========================================================= */

html.mkStyleguideV014 body.mkStyleguideV014 :is(
  .BG-01,
  .btnBadge,
  .plannerTabBadge,
  .mkNcHomeBadge,
  .mkNcCardBadge,
  .mkNcPlannerDeskBadge,
  .mkNcPlannerPhoneBadge,
  .mkNcValueBadge
) {
  box-sizing: border-box !important;
  min-width: 22px !important;
  width: auto !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 5px !important;
  margin: 0;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  vertical-align: middle !important;
  background: var(--cc-a, #FF3232) !important;
  color: var(--cc-w, #FFFFFF) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
}

/* Funktionale Sonder-Badges behalten ihre Semantik/Geometrie, aber niemals Schatten. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.BG-A, .BG-EK-ST, .imageEditBadge, .developmentTrendBadge) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: none !important;
}

/* HOME: BG-01 ist ein einzelnes Element und darf keine Text-/Transform-Regel der Kachel erben. */
html.mkStyleguideV014 body.mkStyleguideV014 .homeNavItem > button.BS-CG-START > .mkNcHomeBadge.BG-01 {
  margin: 0 !important;
  transform: none !important;
}


/* =========================================================
   MagicKcal Styleguide v0.29.32 / AppServer 1.2.195.207 – Chat 79
   Lebensmittel-Editor: Nährwertfeld „davon ges. Fettsäuren“ verwendet
   bestehendes TXT-FL-G + KA-F; keine neue Feld-/Textstyle-Variante.
   ========================================================= */


/* =========================================================
   MagicKcal Styleguide v0.29.33 / AppServer 1.2.195.207 – Chat 79
   Tageslisten-Badge: BG-01 rechts oben in der Hauptkachel auf iPhone/iPad/Desk.
   Die konkrete Positionierung liegt in notification-center.css; TB-01 selbst ohne Badge.
   ========================================================= */


/* =========================================================
   MagicKcal Styleguide v0.29.34 / AppServer 1.2.195.207 – Chat 79
   iPhone Tagesjournal + Einstellungen:
   - kcal-Zahl im Tagesjournal = TXT-DZK-WR (13 px / 700).
   - Einheiten im iPhone-Tagesjournal sichtbar = TXT-DKG-G (13 px / 400 / CC-G).
   - „Gebuchte Lebensmittel / und Gerichte“ mit festem iPhone-Umbruch.
   - Erste TL-R in „Meine App-Einstellungen“ entfällt; Inhalt rückt entsprechend hoch.
   ========================================================= */

html.mkStyleguideV014 body.mkStyleguideV014 .journalBookedTitleIphoneBreak {
  display: none;
}

/* Erste Trennlinie direkt unter „Meine Einstellungen“ bewusst entfernt.
   Achtung: applyChat70Corrections() verschiebt die Inhalte in .accountAppSettingsSubCard;
   deshalb gilt die Ausnahme sowohl vor als auch nach diesem DOM-Wrapping. */
html.mkStyleguideV014 body.mkStyleguideV014 .accountSettingsCard > .authPreparationOptions,
html.mkStyleguideV014 body.mkStyleguideV014 .accountAppSettingsSubCard > .authPreparationOptions {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   MagicKcal Styleguide v0.29.35 / AppServer 1.2.195.207 – Chat 79
   Nachkorrektur Meine Einstellungen:
   TL-R-Ausnahme auf die tatsächlich gerenderte DOM-Struktur erweitert;
   zugehörigen oberen Außen- und Innenabstand ebenfalls entfernt.
   ========================================================= */

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* TXT-DZK-WR: kleine Donut-Zahl; gilt hier explizit für kcal im Tagesjournal. */
  html.mkStyleguideV014 body.mkStyleguideV014 .dailySummary .journalKcalMeter .donutCenter > strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  /* TXT-DKG-G: Einheit direkt unter der Ziffer in allen vier Journal-Donuts. */
  html.mkStyleguideV014 body.mkStyleguideV014 .dailySummary .journalMeters .donutCenter > span {
    display: block !important;
    color: var(--cc-g, #AEB8C4) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .dailySummary .journalMeters .donut-kcal .donutCenter > span {
    font-size: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .dailySummary .journalMeters .donut-kcal .donutCenter > span::after {
    content: "kcal";
    color: var(--cc-g, #AEB8C4) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .journalBookedTitleIphoneBreak {
    display: block;
  }
}


/* =========================================================
   MagicKcal Styleguide v0.29.36 / AppServer 1.2.195.207 – Chat 79
   UI-Restfixes:
   - iPhone „Meine Einstellungen“: erste TL-R bleibt entfernt, kleiner optischer Abstand zur HL.
   - AC-04 „Gespeicherte Phasen“: Chevron 2 px nach oben; Funktion/Rotation unverändert.
   - Aktivierte Lebensmittel-/Gerichtskarten: Kontur 1 px statt 2 px; Farbe/Zustandslogik unverändert.
   ========================================================= */

/* iPhone: nach Entfernen der ersten TL-R nicht an die Headline kleben. */
html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .accountAppSettingsSubCard > .authPreparationOptions {
  margin-top: 6px !important;
}

/* „Gespeicherte Phasen“ ist im bestehenden System AC-04. Chevron optisch 2 px höher. */
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 .ac-chevron {
  transform: translateY(-2px) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04[aria-expanded="true"] .ac-chevron,
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 .ac-chevron.open {
  transform: translateY(-2px) rotate(90deg) !important;
}

/* Auswahl-/Speicherzustand Lebensmittel/Gerichte: gleiche Farbe, nur 1-px-Kontur. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.favoriteCard.plannedSelectionCard, .searchResultCard.savedResultCard).KA-S {
  border-width: 1px !important;
}


/* =========================================================
   MagicKcal Styleguide v0.29.37 / AppServer 1.2.195.207 – Chat 79
   BS-I: neutraler Info-Button für erklärende KA-DN-Dialoge.
   Geometrie/Zustände laufen über den bestehenden Button-Master oben.
   ========================================================= */


/* =========================================================
   MagicKcal Styleguide v0.29.38 / AppServer 1.2.195.207 – Chat 79
   BS-I bleibt 40×40 px mit neutraler Kontur, aber ohne Button-Hintergrund.
   Dadurch kein „Button im Button“-Effekt in erklärenden Kachelköpfen.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 .BS-I {
  background: transparent !important;
}

/* =========================================================
   MagicKcal Styleguide v0.29.39 / AppServer 1.2.195.207 – Chat 79
   BS-I: reine transparente 40×40-px-Hitbox. Das info.svg enthält bereits
   seinen eigenen Kreis; daher keine zusätzliche Buttonfläche/-kontur.
   ========================================================= */
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-I,
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-I:not(:disabled):hover,
html.mkStyleguideV014 body.mkStyleguideV014 button.BS-I:not(:disabled):active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   MagicKcal Styleguide v0.29.41 / AppServer 1.2.195.207 – Chat 79
   Gesammelte Layoutkorrekturen:
   - Desk/iPad Erfolge: Körperzusammensetzung + Zielmedaillen als rechte,
     unabhängige Spalte mit regulärem .85rem-Abstand.
   - iPhone bleibt einspaltig in bestehender Inhaltsreihenfolge.
   ========================================================= */
@media (min-width: 761px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .statisticsGrid > .statisticsRightStack {
    grid-column: 2 !important;
    display: grid !important;
    gap: .85rem !important;
    align-content: start !important;
    align-self: start !important;
    min-width: 0 !important;
  }
}
@media (max-width: 760px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .statisticsGrid > .statisticsRightStack {
    display: contents !important;
  }
}


/* =========================================================
   MagicKcal Styleguide v0.29.42 / AppServer 1.2.195.210 – Chat 80 UI-Runde
   - iPhone Tageslisten-Tabs: Text in V/H/Z ohne Badge immer exakt zentriert.
   - AC-01 bis AC-04: Chevron ohne zusaetzlichen Wortabstand direkt am Label.
   - iPhone Tagesliste: Kochmuetze + Teilen links, Magic rechts.
   ========================================================= */

/* Alle Accordion-Varianten: Chevron direkt am zugehoerigen Text. */
html.mkStyleguideV014 body.mkStyleguideV014 :is(.AC-01, .AC-02, .AC-04) {
  gap: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 :is(.AC-01, .AC-02) .ac-chevron {
  width: auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .AC-04 .ac-chevron {
  margin-right: 0 !important;
}

/* iPhone V/H/Z: beide Tageslisten-Reiter bleiben ohne Badge in jedem Tageskontext mittig. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkIPhone.mkStyleguideV014 body.mkStyleguideV014 .plannerMobileTabsStandalone > button,
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMobileTabsStandalone > button {
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
  }

  /* Zwei runde Aktionen links, flexible Mitte, Magic rechts. */
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions {
    grid-template-columns: repeat(2, 40px) minmax(0, 1fr) max-content !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions .magicMasterBtn.BS-DM-M {
    grid-column: 4 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(2) {
    grid-column: 1 !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button:nth-child(3) {
    grid-column: 2 !important;
  }
}


/* =========================================================
   MagicKcal Styleguide v0.29.43 / AppServer 1.2.195.210 – Chat 80 UI-Korrektur
   - iPhone Tagesliste: Kochmuetze + Teilen links, Magic rechts, alle in EINER Zeile.
   - Tageslisten-Reiter: ehemaliges internes Mengen-Badge wird nicht mehr gerendert.
   ========================================================= */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planHead .compactActions > button {
    grid-row: 1 !important;
  }
}


/* =========================================================
   MagicKcal Styleguide v0.29.45 / AppServer 1.2.195.215 – Chat 80 UI/Sync Runde 2
   - Desk/iPad: „Meine Tagesliste (heute/V/Z)“ bleibt im Accordion-Kopf in einer Zeile.
   - iPhone bleibt unverändert.
   ========================================================= */
@media (min-width: 601px) and (min-height: 501px) {
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planToggle.planToggleDesktop.AC-01 {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  html.mkStyleguideV014 body.mkStyleguideV014 .plannerMerklistePane .planToggle.planToggleDesktop.AC-01 > span:last-child {
    white-space: nowrap !important;
  }
}


/* Chat 80 / Styleguide v0.29.45 – Donut-Zahl + Einheit kompakter; kcal in kompakten Tageslisten-Donuts sichtbar. */
html.mkStyleguideV014 body.mkStyleguideV014 .donutCenter {
  gap: 0 !important;
  line-height: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutCenter > strong,
html.mkStyleguideV014 body.mkStyleguideV014 .donutCenter > span {
  line-height: 1 !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .donutOverview.compact .donutMeter.donut-kcal .donutCenter span {
  display: block !important;
}

/* Erfolge · Zukunft: bewusst zentrierter KA-DN-Dialog; normale Erfolgskacheln sind dabei nicht sichtbar. */
html.mkStyleguideV014 body.mkStyleguideV014:has(.achievementsFutureBackdrop) .statisticsGrid {
  visibility: hidden !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .achievementsFutureBackdrop {
  place-items: center !important;
  align-items: center !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .achievementsFuturePanel {
  width: min(520px, 100%) !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .achievementsFuturePanel > p {
  margin: .55rem 0 1rem;
}
html.mkStyleguideV014 body.mkStyleguideV014 .achievementsFutureActions {
  justify-content: flex-end;
}

/* Chat 81 / AppServer 1.2.195.223 – Erfolge Zukunft: Dialogaktion wie bei den übrigen Dialogen rechts oben. */
html.mkStyleguideV014 body.mkStyleguideV014 .achievementsFuturePanel > h2 {
  padding-right: 3.6rem !important;
}
html.mkStyleguideV014 body.mkStyleguideV014 .achievementsFutureActions {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}



/* =========================================================
   MagicKcal Styleguide v0.29.46 / AppServer 1.2.195.225 – Chat 81
   - BS-BNG: Wochentag-Beschriftung auf TXT-HI-W (14 px / 700 / CC-W).
   ========================================================= */

/* Chat81 / AppServer 1.2.195.225 – vorbereitete Registrierung, noch gesperrt */
html.mkStyleguideV014 body.mkStyleguideV014 [data-mk-preauth-register="1"] .authLoginPanel { max-width:680px; }
html.mkStyleguideV014 body.mkStyleguideV014 .authRegistrationLegal { display:grid; gap:.48rem; margin-top:.2rem; }
html.mkStyleguideV014 body.mkStyleguideV014 .authRegistrationConsent { display:grid; grid-template-columns:auto 1fr; gap:.55rem; align-items:start; color:#AEB8C4; line-height:1.35; }
html.mkStyleguideV014 body.mkStyleguideV014 .authRegistrationConsent input { width:auto; margin-top:.15rem; }
html.mkStyleguideV014 body.mkStyleguideV014 .authRegistrationLegal a { color:#5CE08A; font-weight:700; }