/* Nachbau – Gestaltung nach Yazio-Vorbild (hell/dunkel), ohne Yazio-Grafiken. */
:root {
  --bg: #F7F8FA;
  --karte: #FFFFFF;
  --rand: #E1E5E8;
  --rand-unten: #D5DADE;
  --text: #17191C;
  --text-2: #5C6268;
  --text-3: #8A9096;
  --gruen: #0B7A5A;          /* Links wie „Details“/„Mehr“ */
  --gruen-punkt: #11B67A;    /* Ring-/Balken-Punkt */
  --gruen-hell: #E2FBF2;     /* gewählte Option */
  --gruen-rand: #12A97A;
  --spur: #DCE1E4;           /* Ring- und Balken-Hintergrund */
  --knopf: #262626;
  --knopf-text: #FFFFFF;
  --knopf-schatten: #000000;
  --fehler: #C7322A;
  --tab-aktiv: #0B7A5A;
  --tab-inaktiv: #8A9096;
  --tab-loch: #FFFFFF;
  --blau: #1677F0;           /* ⊕ in der Suche, „Hinzufügen“ auf der Produktseite */
  --plus-gruen: #12A97A;     /* ⊕ in den Listen */
  --minze: #E3FBF3;          /* Mahlzeit-Bild, leere Hinweise */
  --pille: #EEF6E4;
  --pille-text: #4E6A3B;
  --grau-feld: #EEF0F2;      /* Produktname-Feld */
  --rot: #E5484D;            /* Löschen */
  --schatten: 0 2px 8px rgba(20, 30, 40, .08);
  --display: "Rubik", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
  --radius: 16px;
  --tab-hoehe: 64px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111315;
    --karte: #1B1E21;
    --rand: #2C3136;
    --rand-unten: #353B41;
    --text: #F2F4F5;
    --text-2: #B3B9BF;
    --text-3: #868D94;
    --gruen: #3DD39B;
    --gruen-punkt: #2BD08F;
    --gruen-hell: #12352A;
    --gruen-rand: #2BD08F;
    --spur: #343A40;
    --knopf: #F2F4F5;
    --knopf-text: #111315;
    --knopf-schatten: #8A9096;
    --fehler: #FF6B60;
    --tab-aktiv: #3DD39B;
    --tab-loch: #1B1E21;
    --blau: #4C9AFF;
    --plus-gruen: #2BD08F;
    --minze: #12352A;
    --pille: #24331C;
    --pille-text: #B6D79C;
    --grau-feld: #24282C;
    --rot: #FF6369;
    --schatten: 0 2px 8px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.35;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- Rahmen */
#screen {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 16px)
           calc(env(safe-area-inset-bottom) + 24px) calc(env(safe-area-inset-left) + 16px);
}
body.mit-tabs #screen { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tab-hoehe) + 24px); }

.seitenkopf { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.seitenkopf h1, .tagebuch-kopf h1 { margin: 0; font-size: 32px; line-height: 1.1; }
.seite-text { color: var(--text-2); margin: 8px 0 0; }

/* ---------------------------------------------------------------- Tab-Leiste */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: none;
  background: var(--karte);
  border-top: 1px solid var(--rand);
  padding: 6px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.mit-tabs #tabbar { display: flex; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: calc(var(--tab-hoehe) - 8px); justify-content: center;
  color: var(--tab-inaktiv); text-decoration: none; font-size: 13px; font-weight: 700;
}
.tab svg { width: 28px; height: 28px; }
.tab.aktiv { color: var(--tab-aktiv); }
.tab.aktiv .tab-label { color: var(--tab-aktiv); }
.tab-label { color: var(--tab-inaktiv); }

/* ---------------------------------------------------------------- Knöpfe & Felder */
.knopf-haupt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--knopf); color: var(--knopf-text);
  font-family: var(--display); font-weight: 700; font-size: 18px;
  box-shadow: 0 4px 0 var(--knopf-schatten);
  transition: transform .08s, box-shadow .08s;
}
.knopf-haupt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--knopf-schatten); }
.knopf-haupt:disabled { opacity: .45; }
.knopf-haupt.breit { width: 100%; }

.knopf-rund {
  width: 64px; height: 64px; border-radius: 50%; border: 0;
  background: var(--knopf); color: var(--knopf-text);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 var(--knopf-schatten);
}
.knopf-rund svg { width: 28px; height: 28px; stroke-width: 2.6; }
.knopf-rund:disabled { background: var(--spur); color: var(--text-3); box-shadow: none; }
.knopf-rund:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--knopf-schatten); }

.knopf-icon {
  width: 44px; height: 44px; border: 0; background: transparent; padding: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
  border-radius: 50%;
}
.knopf-icon svg { width: 26px; height: 26px; }

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld-label { font-size: 14px; color: var(--text-2); font-weight: 600; }
.eingabe {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font-size: 16px; /* kein iOS-Zoom */
  background: var(--karte); border: 2px solid var(--rand); border-bottom-width: 3px; border-radius: 14px;
  outline: none;
}
.eingabe:focus { border-color: var(--gruen-rand); }
.fehlertext { color: var(--fehler); font-size: 15px; margin: 12px 0 0; }

.link { color: var(--gruen); font-weight: 700; text-decoration: none; font-family: var(--display); font-size: 18px; }

/* ---------------------------------------------------------------- Karten */
.karte {
  background: var(--karte);
  border: 2px solid var(--rand);
  border-bottom-color: var(--rand-unten);
  border-radius: var(--radius);
}
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 12px; }
.abschnitt-titel { margin: 0; font-size: 26px; }

/* ---------------------------------------------------------------- Login */
.login { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); padding-top: 32px; }
.login-marke { display: flex; align-items: center; gap: 12px; }
.login-icon { border-radius: 18px; }
.login-name { font-family: var(--display); font-weight: 800; font-size: 26px; }
.login-titel { font-size: 30px; line-height: 1.15; margin: 40px 0 28px; }
.login-form { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.login-form .knopf-haupt { margin-top: auto; }

/* ---------------------------------------------------------------- Onboarding */
.onboarding { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); }
.onb-kopf { display: flex; align-items: center; gap: 8px; margin: 0 -8px 8px; }
.fortschritt { position: relative; flex: 1; height: 10px; border-radius: 99px; background: var(--spur); margin-right: 8px; }
.fortschritt-wert {
  position: relative; height: 100%; border-radius: 99px; background: var(--gruen-punkt); min-width: 10px;
  transition: width .25s ease;
}
.onb-titel { font-size: 28px; line-height: 1.15; margin: 20px 0 10px; }
.onb-teaser { color: var(--text-2); margin: 0 0 20px; }
.onb-inhalt { margin-top: 8px; }
.onb-fuss {
  margin-top: auto; padding-top: 24px; display: flex; justify-content: flex-end;
  position: sticky; bottom: calc(env(safe-area-inset-bottom) + 12px);
}
.onb-fuss.breit { justify-content: stretch; }

.optionen { display: flex; flex-direction: column; gap: 14px; }
.option {
  text-align: left; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
  background: var(--karte); border: 2px solid var(--rand); border-bottom-width: 4px; border-radius: var(--radius);
  font-size: 18px;
}
.option[aria-checked="true"] { background: var(--gruen-hell); border-color: var(--gruen-rand); }
.option-titel { font-weight: 500; }
.option-text { font-size: 14px; color: var(--text-2); }

.zahl-feld { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 24px; }
.zahl-eingabe {
  width: 5.5ch; font-family: var(--display); font-weight: 800; font-size: 56px; text-align: center;
  border: 0; border-bottom: 3px solid var(--spur); background: transparent; outline: none; padding: 0 0 4px;
}
.zahl-eingabe:focus { border-bottom-color: var(--gruen-punkt); }
.zahl-einheit { font-size: 22px; font-weight: 700; color: var(--text-2); }
.datum-reihe { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; }
.datum-teil { text-align: center; font-size: 20px; font-weight: 700; }

.ergebnis .abschnitt-titel { margin: 8px 0 12px; font-size: 22px; }
.ergebnis-karte { padding: 24px 20px; text-align: center; }
.ergebnis-kcal { font-size: 52px; line-height: 1; }
.ergebnis-kcal-label { color: var(--text-2); margin-top: 6px; }
.ergebnis-makros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.ergebnis-makro { display: flex; flex-direction: column; gap: 2px; }
.ergebnis-makro-wert { font-weight: 800; font-family: var(--display); font-size: 22px; }
.ergebnis-makro-label { font-size: 14px; color: var(--text-2); }
.ergebnis-wasser { text-align: center; color: var(--text-2); margin: 16px 0 0; }

/* ---------------------------------------------------------------- Tagebuch */
.tagebuch-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.woche { margin: 8px 0 0; font-size: 18px; }
.uebersicht-karte { padding: 16px 18px 20px; }
.uebersicht-karte.laedt { min-height: 270px; }
.uebersicht-oben { display: grid; grid-template-columns: 1fr 160px 1fr; align-items: center; }
.zahl-block { text-align: center; }
.zahl-wert { font-weight: 800; font-size: 20px; font-family: var(--display); }
.zahl-label { color: var(--text-2); font-size: 16px; }
.ring-box { position: relative; width: 160px; height: 142px; }
.ring { width: 160px; height: 142px; }
.ring-spur, .ring-wert { fill: none; stroke-width: 7; stroke-linecap: round; }
.ring-spur { stroke: var(--spur); }
.ring-wert { stroke: var(--gruen-punkt); }
.ring-punkt { fill: var(--gruen-punkt); stroke: var(--karte); stroke-width: 1.5; }
.ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 12px; }
.ring-zahl { font-size: 30px; line-height: 1; }
.makros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.makro { text-align: center; }
.makro-label { color: var(--text-2); font-size: 16px; }
.makro-balken { position: relative; height: 8px; border-radius: 99px; background: var(--spur); margin: 10px 0 8px; }
.makro-fuellung { height: 100%; border-radius: 99px; background: var(--gruen-punkt); }
.makro-punkt {
  position: absolute; top: 50%; width: 8px; height: 8px; margin-left: -4px; transform: translate(4px, -50%);
  border-radius: 50%; background: var(--gruen-punkt);
}
.makro-wert { font-weight: 700; font-size: 14px; }

/* ---------------------------------------------------------------- Tagebuch: Kalender + Ernährung */
.kalender { position: relative; }
.kalender-feld { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.mahlzeiten-karte { overflow: hidden; }
.mahlzeiten-karte.laedt { min-height: 420px; }
.mahlzeit-karte { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; }
.mahlzeit-karte + .mahlzeit-karte { border-top: 2px solid var(--rand); }
.mahlzeit-link { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.mahlzeit-symbol {
  flex: none; width: 58px; height: 58px; border-radius: 50%; border: 5px solid var(--spur);
  display: inline-flex; align-items: center; justify-content: center; font-size: 25px; line-height: 1; background: var(--karte);
}
/* Ring um das Symbol = Anteil am kcal-Ziel der Mahlzeit, ab 6 Uhr im Uhrzeigersinn (wie Yazio) */
.mahlzeit-symbol.mit-ring {
  border: 0;
  background:
    radial-gradient(closest-side, var(--karte) calc(100% - 5px), transparent calc(100% - 4.5px)),
    conic-gradient(from 180deg, var(--gruen-punkt) calc(var(--anteil) * 1turn), var(--spur) 0);
}
.mahlzeit-symbol.gross { width: auto; height: auto; border: 0; background: none; font-size: 84px; }
.mahlzeit-text { min-width: 0; }
.mahlzeit-name { font-weight: 700; font-size: 19px; display: flex; align-items: center; gap: 4px; }
.mahlzeit-name svg { width: 18px; height: 18px; stroke-width: 2.4; }
.mahlzeit-kcal { color: var(--text-2); font-size: 16px; margin-top: 2px; }
.mahlzeit-eintraege { color: var(--text-3); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.mahlzeit-plus {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--knopf); color: var(--knopf-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.mahlzeit-plus svg { width: 26px; height: 26px; }
.ausstehend-marke svg, .ausstehend-pille svg, .liste-unter > svg { width: 14px; height: 14px; flex: none; }
.ausstehend-pille {
  display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; padding: 1px 8px; border-radius: 99px;
  background: var(--spur); color: var(--text-2); font-size: 12px; font-weight: 600;
}

/* ---------------------------------------------------------------- Gemeinsame Bausteine */
.kopfzeile { display: flex; align-items: center; gap: 6px; min-height: 56px; margin: 0 -8px; }
.kopfzeile-titel { margin: 0; font-size: 22px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopfzeile-rechts { margin-left: auto; display: flex; }
.leer-hinweis { color: var(--text-2); text-align: center; padding: 24px 8px; margin: 0; }
.leer-hinweis h2 { color: var(--text); font-size: 20px; margin: 8px 0; }
.leer-hinweis .knopf-haupt { margin-top: 16px; font-size: 16px; }

.plus-kreis {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.plus-kreis svg { width: 38px; height: 38px; stroke-width: 1.8; }
.plus-kreis.gruen { color: var(--plus-gruen); }
.plus-kreis.blau { color: var(--blau); }
.plus-kreis.blau svg { width: 30px; height: 30px; }
.plus-kreis.erledigt { animation: tipp .5s ease; }
@keyframes tipp { 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

.auswahl {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 50px; padding: 0 12px 0 16px; background: var(--karte);
  border: 2px solid var(--rand); border-bottom-width: 3px; border-radius: 12px; font-weight: 700; font-size: 15px;
}
.auswahl svg { width: 22px; height: 22px; flex: none; }
.auswahl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.auswahl.klein { border: 0; min-height: 44px; padding: 0 4px; background: none; font-size: 22px; font-weight: 600; gap: 2px; }

.blatt-huelle { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0); display: flex; align-items: flex-end; transition: background .2s; }
.blatt-huelle.offen { background: rgba(0, 0, 0, .35); }
.blatt {
  width: 100%; max-width: 560px; margin: 0 auto; background: var(--karte); border-radius: 20px 20px 0 0;
  padding: 10px 8px calc(env(safe-area-inset-bottom) + 12px); transform: translateY(100%); transition: transform .2s ease;
}
.blatt-huelle.offen .blatt { transform: none; }
.blatt-titel { padding: 12px 16px; color: var(--text-2); font-size: 15px; }
.blatt-option { display: block; width: 100%; text-align: left; padding: 16px; border: 0; background: none; font-size: 18px; border-radius: 12px; }
.blatt-option:active { background: var(--spur); }
.blatt-option.gefahr { color: var(--rot); font-weight: 600; }
.blatt-option.abbrechen { color: var(--text-2); }

/* ---------------------------------------------------------------- Eintragen */
.seite.eintragen { padding-bottom: 110px; }
.eintragen-kopf { min-height: 56px; display: flex; align-items: center; }
.eintragen-kopf h1 { margin: 0; font-size: 32px; }
.kacheln {
  display: flex; gap: 12px; overflow-x: auto; margin: 8px -16px 0; padding: 4px 16px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kacheln::-webkit-scrollbar { display: none; }
.kachel { flex: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; padding: 10px 0 0; width: 98px; }
.kachel:first-child { align-items: flex-start; }
.kachel-bild {
  width: 98px; height: 90px; border-radius: 18px; background: var(--karte);
  border: 2px solid var(--rand); border-bottom-width: 6px; display: flex; align-items: center; justify-content: center;
}
.kachel-bild svg { width: 52px; height: 52px; }
.kachel.aktiv .kachel-bild { border-color: var(--gruen-rand); background: var(--gruen-hell); }
.kachel-text { font-size: 15px; color: var(--text-2); white-space: nowrap; }
.kachel.aktiv .kachel-text { color: var(--text); font-weight: 700; }
.kachel.aus .kachel-bild svg { opacity: .55; }
.kachel-neu {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  background: #FFB37A; color: #4A2A10; font-weight: 700; font-size: 14px; padding: 2px 10px; border-radius: 10px;
}

.suchfeld {
  display: flex; align-items: center; gap: 4px; margin-top: 22px; min-height: 60px; padding: 0 6px 0 14px;
  background: var(--karte); border: 2px solid var(--gruen-rand); border-radius: 14px;
}
.such-lupe svg { width: 26px; height: 26px; display: block; }
.such-eingabe {
  flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 18px; padding: 14px 6px;
  -webkit-appearance: none; appearance: none;
}
.such-eingabe::-webkit-search-cancel-button { display: none; }
.such-eingabe::placeholder { color: var(--text-2); }
.such-zurueck, .such-leeren { display: none; flex: none; }
.filter-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 8px; }
.eintragen-liste { min-height: 200px; }
.liste-zeile { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rand); cursor: pointer; }
.liste-text { flex: 1; min-width: 0; }
.liste-name { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-unter { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 2px; }
.liste-kcal { flex: none; font-size: 18px; color: var(--text-2); }
.liste-titel { font-size: 16px; color: var(--text-2); margin: 16px 0 4px; }
.eintragen-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: center;
  max-width: 560px; margin: 0 auto;
  padding: 10px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 16px);
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.zaehler {
  flex: none; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gruen-rand); background: var(--karte);
  display: flex; align-items: center; justify-content: center; color: var(--gruen); font-size: 20px; font-weight: 600;
}
.knopf-haupt.fertig { flex: 1; }
.such-bereich { display: none; }

/* Suchmodus */
.eintragen.sucht { padding-bottom: 32px; }
.eintragen.sucht .eintragen-kopf, .eintragen.sucht .kacheln, .eintragen.sucht .filter-reihe,
.eintragen.sucht .eintragen-liste, .eintragen.sucht .eintragen-fuss, .eintragen.sucht .such-lupe { display: none; }
.eintragen.sucht .such-bereich { display: block; }
.eintragen.sucht .suchfeld { margin-top: 8px; border: 0; box-shadow: var(--schatten); padding: 0 6px; min-height: 70px; border-radius: 16px; }
.eintragen.sucht .such-zurueck, .eintragen.sucht .such-leeren { display: inline-flex; color: var(--text-2); }
.chips { display: flex; gap: 10px; margin: 20px 0 16px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: var(--bg);
  border: 2px solid var(--rand); color: var(--text-2); font-weight: 700; font-size: 15px;
}
.chip svg { width: 17px; height: 17px; }
.chip[aria-pressed="true"] { background: var(--gruen-hell); border-color: var(--gruen-rand); color: var(--text); }
.treffer-liste { display: flex; flex-direction: column; gap: 16px; }
.treffer-liste[aria-busy="true"] { opacity: .6; }
.treffer-karte { background: var(--karte); border-radius: 16px; box-shadow: var(--schatten); padding: 18px 20px 16px; cursor: pointer; }
.treffer-oben { display: flex; align-items: flex-start; gap: 8px; }
.treffer-text { flex: 1; min-width: 0; }
.treffer-name { font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
.treffer-unter { color: var(--text-2); font-size: 16px; margin-top: 6px; }
.treffer-oben .plus-kreis { margin: -6px -8px 0 0; }
.treffer-zeile { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pille { background: var(--pille); color: var(--pille-text); font-size: 14px; padding: 4px 16px; border-radius: 99px; }
.punkt-trenner { color: var(--text-2); }
.geprueft { color: var(--blau); display: inline-flex; }
.geprueft svg { width: 24px; height: 24px; }
.treffer-kcal { margin-left: auto; color: var(--text-2); font-size: 16px; }
.treffer-makros { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--rand); }
.treffer-makro { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--text-2); }
.treffer-makro strong { color: var(--text); font-size: 15px; }

/* ---------------------------------------------------------------- Produktseite */
.seite.produkt { padding-bottom: 190px; }
.seite.produkt .kopfzeile { position: sticky; top: 0; z-index: 4; background: var(--karte); margin: -12px -16px 0; padding: calc(env(safe-area-inset-top) + 4px) 8px 4px; box-shadow: 0 1px 0 var(--rand); }
.kopf-auswahl { margin-left: 18px; }
.produkt-feld {
  margin: 0 -16px; min-height: 200px; padding: 24px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(to bottom, var(--karte), var(--grau-feld)); text-align: center;
}
.produkt-name { margin: 0; font-size: 26px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.produkt-marke { margin: 6px 0 0; color: var(--text-2); }
.makro-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 2px; text-align: center; padding: 22px 0 8px; }
.makro-leiste-feld { display: flex; flex-direction: column; min-width: 0; }
.makro-leiste-feld strong { font-size: 20px; font-weight: 600; white-space: nowrap; }
.makro-leiste-feld span { font-size: 13px; color: var(--text-2); letter-spacing: -0.01em; }
.geprueft-zeile { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-2); margin: 10px 0 0; font-size: 15px; }
.geprueft-zeile .geprueft svg { width: 20px; height: 20px; }
.naehrwerte { margin-top: 28px; }
.naehrwerte-titel { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.naehrwert-zeile { display: flex; justify-content: space-between; padding: 14px 0; font-size: 18px; }
.naehrwert-zeile.fett { font-weight: 600; }
.naehrwerte-gruppe { font-size: 18px; font-weight: 600; margin: 18px 0 0; padding-top: 14px; border-top: 2px solid var(--rand); }
/* Zielbalken (Details, Mahlzeit-Detail) */
.ziel-karte { padding: 14px 20px 22px; }
.ziel-balken + .ziel-balken { margin-top: 14px; }
.ziel-balken-kopf { display: flex; justify-content: space-between; font-size: 17px; }
.ziel-balken-kopf span:first-child { color: var(--text-2); }
.ziel-balken .makro-balken { margin: 8px 0 0; }
.produkt-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: end;
  max-width: 560px; margin: 0 auto; background: var(--karte); box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  padding: 22px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
}
.menge-eingabe {
  width: 100%; height: 60px; border: 2px solid var(--blau); border-radius: 12px; background: var(--karte);
  font-size: 20px; text-align: center; outline: none; padding: 0 6px;
}
.menge-eingabe.fehler { border-color: var(--fehler); }
.portion-feld { position: relative; }
.portion-label { position: absolute; top: -10px; left: 14px; z-index: 1; padding: 0 6px; font-size: 14px; color: var(--text-2); background: var(--karte); }
.portion-feld .auswahl { min-height: 60px; font-weight: 400; font-size: 18px; border-width: 2px; border-radius: 12px; }
.knopf-schwebend {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 6;
  bottom: calc(env(safe-area-inset-bottom) + 112px);
  display: inline-flex; align-items: center; gap: 12px; padding: 0 32px; height: 60px; border: 0; border-radius: 99px;
  background: var(--blau); color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 4px 12px rgba(22, 119, 240, .35);
}
.knopf-schwebend svg { width: 24px; height: 24px; }
.knopf-schwebend:disabled { opacity: .6; }

/* ---------------------------------------------------------------- Barcode */
.barcode-seite { display: flex; flex-direction: column; min-height: calc(100dvh - 40px); }
.kamera-flaeche {
  position: relative; flex: 1; min-height: 420px; margin-top: 12px; border-radius: 16px; overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.kamera-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera-ziel { position: relative; width: 78%; max-width: 360px; }
.kamera-ziel svg { display: block; width: 100%; height: auto; }
.kamera-hinweis { position: absolute; left: 16px; right: 16px; bottom: 24px; color: #fff; text-align: center; }
.kamera-hinweis p { margin: 0 0 12px; font-size: 15px; }
.barcode-tastatur { display: flex; gap: 10px; }
.barcode-tastatur .eingabe { color: var(--text); }
.barcode-tastatur .knopf-haupt { min-height: 52px; padding: 0 18px; flex: none; background: #fff; color: #111; box-shadow: none; }
.tastatur-knopf {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); border: 0; border-radius: 99px;
  padding: 10px 18px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; white-space: nowrap;
}

/* ---------------------------------------------------------------- Mahlzeit-Detail / Ernährung */
.mahlzeit-seite.mit-fuss { padding-bottom: 110px; }
.mahlzeit-bild {
  height: 196px; margin-top: 8px; border-radius: 16px; background: var(--minze); border: 2px solid var(--rand);
  display: flex; align-items: center; justify-content: center;
}
.mahlzeit-raster { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; overflow: hidden; }
.raster-feld { display: flex; flex-direction: column; align-items: center; padding: 12px 8px; }
.raster-feld:nth-child(odd) { border-right: 2px solid var(--rand); }
.raster-feld:nth-child(-n+2) { border-bottom: 2px solid var(--rand); }
.raster-feld strong { font-size: 19px; }
.raster-feld span { color: var(--text-2); font-size: 15px; }
.abschnitt-klein { font-size: 21px; font-weight: 700; margin: 26px 0 10px; }
.abschnitt-klein.mit-wert { display: flex; justify-content: space-between; align-items: baseline; }
.abschnitt-klein.mit-wert h2 { margin: 0; font-size: 21px; }
.abschnitt-klein.mit-wert span { color: var(--text-2); font-size: 16px; font-weight: 400; }
.eintrags-liste { overflow: hidden; }
.wisch-zeile { position: relative; overflow: hidden; }
.wisch-zeile + .wisch-zeile { border-top: 1px solid var(--rand); }
.wisch-loeschen {
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: 0; background: var(--rot); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 600;
  visibility: hidden;
}
.wisch-zeile.wischt .wisch-loeschen { visibility: visible; }
.wisch-loeschen svg { width: 20px; height: 20px; }
.wisch-inhalt {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--karte);
  touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.naehrwerte-karte { margin-top: 24px; padding: 4px 20px 8px; }
.naehrwerte-karte .naehrwerte { margin-top: 12px; }
.fuss-fix {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: 560px; margin: 0 auto;
  padding: 10px calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 16px);
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.leer-karte { margin-top: 12px; padding: 24px 20px; border-radius: 16px; background: var(--minze); text-align: center; font-size: 18px; }
.leer-karte p { margin: 8px 0 0; }
.leer-emoji { font-size: 44px; }

.fehler-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  padding: 12px 16px; border-radius: 12px; background: var(--karte); border: 2px solid var(--fehler); color: var(--text);
}
.fehler-box .link { border: 0; background: none; padding: 0; font-size: 16px; }
.knopf-haupt.hell { background: #fff; color: #111; box-shadow: none; min-height: 48px; }

/* ---------------------------------------------------------------- Zweitknopf, Blätter, Formulare (Task 10) */
.knopf-zweit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border: 2px solid var(--rand); border-bottom-width: 4px; border-radius: 999px; background: var(--karte);
  font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--text);
}
.knopf-zweit.breit { width: 100%; }
.knopf-zweit.gefahr { color: var(--rot); }
.knopf-zweit:active { transform: translateY(2px); }
.knopf-haupt svg, .knopf-zweit svg { width: 22px; height: 22px; }
.blatt-option-titel { display: block; font-weight: 600; }
.blatt-option-unter { display: block; font-size: 14px; color: var(--text-2); margin-top: 2px; }
.wert-blatt { padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px); max-height: 88dvh; overflow-y: auto; }
.wert-blatt-titel { font-family: var(--display); font-weight: 800; font-size: 22px; margin: 0 4px 12px; }
.wert-blatt-hinweis { color: var(--text-2); margin: -4px 4px 14px; font-size: 15px; }
.wert-blatt-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.wert-blatt-knoepfe .knopf-haupt { padding: 0 12px; }
.blatt-feld { display: flex; align-items: center; gap: 10px; }
.blatt-einheit { font-weight: 700; color: var(--text-2); font-size: 18px; }
.blatt-eingabe { font-size: 20px; }
.blatt-optionen .option { font-size: 17px; padding: 14px 16px; }
.produkt-fuss.eingebettet { position: static; box-shadow: none; padding: 18px 0 0; background: none; }

.formular-seite.mit-fuss, .einstellungen { padding-bottom: 110px; }
.form-karte { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.form-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.form-karte.form-raster { display: grid; }
.form-feld { min-width: 0; }
.feld-optional { color: var(--text-3); font-weight: 400; }
.textfeld { min-height: 120px; resize: vertical; font-family: inherit; }
.oben-null { margin-top: 0; }
.formular .fuss-fix .knopf-haupt, .seite .fuss-fix .knopf-haupt { width: 100%; }
.auswahl.statisch { min-height: 60px; font-weight: 400; font-size: 18px; border-width: 2px; border-radius: 12px; }

.zutaten-karte { overflow: hidden; }
.zutaten-karte .liste-zeile { padding: 12px 8px 12px 16px; }
.liste-zeile.ohne-tipp { cursor: default; }
.zutaten-karte .liste-zeile:last-child { border-bottom: 0; }
.zutat-plus {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: none;
  color: var(--blau); font-weight: 700; font-size: 17px;
}
.zutat-plus svg { width: 26px; height: 26px; }
.ebene { position: fixed; inset: 0; z-index: 25; background: var(--bg); overflow-y: auto; }
.ebene-inhalt { max-width: 560px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 12px) 16px 40px; }
.ebene .suchfeld { margin-top: 8px; }
.zutat-liste { margin-top: 8px; }

/* ---------------------------------------------------------------- Einstellungen */
.kopfzeile-titel.mitte { flex: 1; text-align: center; margin-right: 44px; font-size: 20px; font-weight: 700; }
.einst-gruppe { font-size: 17px; color: var(--text-2); font-weight: 700; margin: 26px 0 10px; }
.einst-karte { overflow: hidden; margin-top: 16px; }
.einst-gruppe + .einst-karte { margin-top: 0; }
.einst-zeile {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px 12px 20px;
  border: 0; background: none; text-align: left; font-size: 17px; color: var(--text);
}
.einst-zeile + .einst-zeile { border-top: 2px solid var(--rand); }
.einst-symbol svg { width: 24px; height: 24px; display: block; }
.einst-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.einst-unter { font-size: 14px; color: var(--text-2); }
.einst-wert { color: var(--gruen); font-weight: 700; text-align: right; }
.einst-wert.leer { color: var(--text-2); font-weight: 400; }
.einst-pfeil svg { width: 22px; height: 22px; color: var(--text-2); display: block; }
.einst-gesamt { display: flex; justify-content: space-between; padding: 16px 52px 16px 20px; font-size: 17px; }
.einst-gesamt strong { color: var(--gruen); }
.einst-gesamt strong.fehler { color: var(--fehler); }
.einstellungen .knopf-zweit.breit { margin-top: 4px; }
.einstellungen .optionen { margin-top: 16px; }
.schalter {
  flex: none; position: relative; width: 58px; height: 34px; border-radius: 99px; border: 0; padding: 0;
  background: var(--spur); transition: background .15s;
}
.schalter-knopf { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.schalter[aria-checked="true"] { background: var(--gruen-punkt); }
.schalter[aria-checked="true"] .schalter-knopf { transform: translateX(24px); }
.sortier-knoepfe { display: flex; }
.sortier-knoepfe .knopf-icon:disabled { opacity: .3; }
.prozent-feld { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.prozent-eingabe {
  width: 64px; height: 44px; text-align: center; font-size: 18px; font-weight: 700; color: var(--gruen);
  border: 2px solid var(--rand); border-radius: 10px; background: var(--karte); outline: none;
}
.prozent-eingabe:focus { border-color: var(--gruen-rand); }

/* ---------------------------------------------------------------- Profil */
.profil-kopf {
  display: flex; align-items: center; gap: 18px; width: 100%; margin-top: 18px; padding: 22px 18px; text-align: left; color: inherit;
}
.profil-bild {
  flex: none; width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--minze); border: 3px solid var(--spur); font-family: var(--display); font-weight: 800; font-size: 36px; color: var(--gruen);
}
.profil-kopf-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profil-name { font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.profil-info { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 17px; }
.profil-symbol svg { width: 24px; height: 24px; display: block; color: var(--gruen-punkt); }
.profil-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 104px; }
.profil-kachel { padding: 16px 18px; }
.profil-kachel-wert { font-size: 26px; }
.profil-kachel-label { color: var(--text-2); font-weight: 600; font-size: 17px; }

/* ---------------------------------------------------------------- Pro */
.pro-kopf { display: flex; align-items: center; gap: 16px; padding: 18px; margin-top: 12px; }
.pro-titel { font-size: 22px; }
.pro-kopf .seite-text { margin-top: 4px; }
.pro-haken { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--gruen-punkt); color: #fff; display: flex; align-items: center; justify-content: center; }
.pro-haken svg { width: 30px; height: 30px; stroke-width: 3; }
.pro-punkt svg { width: 22px; height: 22px; display: block; color: var(--gruen-punkt); stroke-width: 3; }
.pro-punkt.spaeter svg { color: var(--text-3); }

/* ---------------------------------------------------------------- Mahlzeiten */
.zeile-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 4px 0 8px; }
.zeile-rechts .auswahl.klein { font-size: 18px; }
.mahlzeiten-liste { display: flex; flex-direction: column; gap: 12px; }
.mahlzeit-kopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 18px; border: 0; background: none; text-align: left; color: inherit; }
.mahlzeit-kopf .liste-text { display: flex; flex-direction: column; }
.mahlzeit-details { border-top: 2px solid var(--rand); padding: 0 18px 16px; }
.knopf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.knopf-reihe .knopf-haupt { padding: 0 12px; min-height: 52px; font-size: 17px; }
.als-mahlzeit { margin-top: 14px; }
.leer-karte .knopf-haupt { margin-top: 16px; font-size: 16px; }

/* ---------------------------------------------------------------- Rezepte */
.kopf-knoepfe { display: flex; gap: 2px; margin-right: -8px; }
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 16px 0 6px; }
.segment-knopf {
  min-height: 44px; border-radius: 99px; border: 2px solid var(--rand); border-bottom-width: 4px; background: var(--karte);
  font-size: 16px; color: var(--text);
}
.segment-knopf[aria-selected="true"] { background: var(--gruen-hell); border-color: var(--gruen-rand); font-weight: 700; }
.rezept-abschnitt .abschnitt-titel { margin: 30px 0 14px; }
.rubriken { display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
.rubriken::-webkit-scrollbar { display: none; }
.rubriken-kacheln { grid-template-rows: auto auto; grid-auto-columns: 132px; }
.rubriken-kacheln:has(> :only-child), .rubriken-kacheln:has(> :nth-child(2):last-child) { grid-template-rows: auto; }
.rubriken-chips { grid-auto-columns: max-content; }
.rubriken-karten { grid-auto-columns: 260px; }
.rubrik {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--karte); border: 2px solid var(--rand); border-bottom-width: 5px; border-radius: 18px; color: var(--text);
}
.rubrik-chips { min-width: 104px; padding: 12px 14px; font-size: 15px; }
.rubrik-chips .rubrik-emoji { font-size: 30px; }
.rubrik-kacheln { height: 132px; font-weight: 700; font-size: 15px; }
.rubrik-kacheln .rubrik-emoji { font-size: 40px; }
.rubrik-karten { height: 170px; align-items: flex-start; justify-content: flex-end; padding: 16px 18px; background: var(--minze); font-weight: 700; font-size: 20px; }
.rubrik-karten .rubrik-emoji { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-size: 64px; }
.rubrik-pfeil { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--knopf); color: var(--knopf-text); display: flex; align-items: center; justify-content: center; }
.rubrik-pfeil svg { width: 20px; height: 20px; }
.rezept-liste { overflow: hidden; margin-top: 12px; }
.rezept-zeile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: none; text-align: left; color: inherit; }
.rezept-zeile + .rezept-zeile { border-top: 1px solid var(--rand); }
.rezept-zeile .liste-text { display: flex; flex-direction: column; }
.rezept-emoji { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--minze); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.rezept-bild { font-size: 64px; line-height: 1; margin-bottom: 10px; }
.rezept-tags { margin: 14px 0 0; }
.anleitung { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.anleitung p { margin: 4px 0 0; color: var(--text-2); white-space: pre-wrap; }

/* ---------------------------------------------------------------- Hinweise */
#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--tab-hoehe) + 16px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--knopf); color: var(--knopf-text); padding: 12px 18px; border-radius: 12px;
  transition: opacity .2s, transform .2s; width: max-content; max-width: calc(100vw - 32px); z-index: 20;
}
#toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- Abgleich Stufe 1: Details, Kalender, Bearbeiten */
.seite.mit-fuss { padding-bottom: 110px; }
.mahlzeit-symbol.mini { width: 26px; height: 26px; border: 0; background: none; font-size: 18px; }
.mahlzeit-chips { flex-wrap: nowrap; overflow-x: auto; margin: 4px -20px 18px; padding: 0 20px; scrollbar-width: none; }
.mahlzeit-chips::-webkit-scrollbar { display: none; }
.mahlzeit-chips .chip { flex: none; background: var(--karte); font-weight: 500; color: var(--text); padding: 6px 14px 6px 8px; }
.saeulen-legende { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 15px; margin: 4px 0 12px; }
.saeulen-legende .punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.saeulen-legende .punkt:first-child { margin-left: 0; }
.punkt.aktuell, .saeule.aktuell { background: var(--gruen-punkt); }
.punkt.ziel, .saeule.ziel { background: var(--spur); }
.saeulen-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.saeulen-paar { height: 140px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.saeule { width: 18px; min-height: 2px; border-radius: 6px 6px 0 0; }
.saeulen-label { text-align: center; color: var(--text-2); font-size: 14px; margin-top: 6px; }
.kalender-seite .kopfzeile-titel { font-size: 22px; }
.kal-monat { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.kal-monat-titel { font-weight: 700; font-size: 19px; }
.kal-pfeil { color: var(--blau); font-size: 34px; line-height: 1; }
.kal-wochentage, .kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.kal-wochentage span { font-weight: 600; font-size: 14px; color: var(--text-2); padding: 6px 0; }
.kal-tag { border: 0; background: none; padding: 8px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 16px; color: var(--text); }
.kal-punkt { width: 26px; height: 26px; border-radius: 50%; }
.kal-tag.heute .kal-zahl { color: var(--blau); }
.kal-tag.gewaehlt .kal-zahl { color: var(--blau); }
.kal-tag.gewaehlt .kal-punkt { background: var(--blau); }
.kal-statistik { display: grid; grid-template-columns: repeat(2, 1fr); text-align: center; margin-top: 40px; gap: 8px; }
.kal-wert { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kal-symbol { font-size: 24px; }
.kal-label { color: var(--text-2); font-size: 15px; }
.kal-wert strong { font-size: 19px; }
.schnell-kopf { margin: 0 -16px; padding: 22px 16px 26px; background: linear-gradient(var(--bg), var(--grau-feld)); text-align: center; }
.schnell-emoji { font-size: 56px; line-height: 1.1; }
.schnell-titel { font-weight: 600; font-size: 19px; margin-top: 6px; }
.schnell-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; padding-bottom: 110px; }
.schnell-feld { min-height: 56px; border: 1.5px solid var(--text-3); border-radius: 10px; background: var(--bg); }
.schwebe-plus {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); transform: translateX(-50%); z-index: 5;
  width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--blau); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.schwebe-plus svg { width: 40px; height: 40px; stroke-width: 1.8; }
.liste-datum { font-size: 16px; font-weight: 700; margin: 18px 0 2px; }
.kombi-zeile .mahlzeit-symbol.mini { font-size: 22px; width: 32px; }
.eintragen-liste .leer-hinweis .knopf-haupt { padding: 0 28px; }
.such-verlauf-titel { color: var(--text); font-weight: 700; margin: 22px 0 4px; }
.such-verlauf { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rand); background: none; padding: 18px 4px; font-size: 18px; color: var(--text); }
.eintrags-liste.ohne-karte { margin-top: 18px; border-bottom: 2px solid var(--rand); }
.eintrags-liste.ohne-karte .wisch-inhalt { background: var(--bg); padding: 12px 0; }
.bearbeiten-ebene { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; padding-bottom: 100px; }
.bearbeiten-gruppe { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 18px 0 8px; }
.bearbeiten-gruppe .rechts { margin-left: auto; }
.bearbeiten-zeile { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 2px solid var(--rand); }
.auswahl-kasten { width: 24px; height: 24px; flex: none; accent-color: var(--gruen-rand); margin: 0; }
.knopf-icon.an { color: var(--gruen); }
.bearbeiten-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 560px; margin: 0 auto;
  background: var(--karte); border-top: 1px solid var(--rand); padding: 10px 8px calc(env(safe-area-inset-bottom) + 10px);
}
.bearbeiten-aktion { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-3); font-size: 15px; font-weight: 600; }
.bearbeiten-aktion svg { width: 26px; height: 26px; }
.bearbeiten-leiste.aktiv .bearbeiten-aktion { color: var(--text); }
.kopieren-ebene .form-feld { margin-top: 18px; }
.bearbeiten-ebene > .seite {
  max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 16px) 0 calc(env(safe-area-inset-left) + 16px);
}
.eintrags-liste.ohne-karte .liste-kcal { color: var(--text); }
.bearbeiten-aktion span { white-space: nowrap; font-size: 14px; }
.land-zeile { gap: 14px; }
.land-flagge { font-size: 26px; }
.land-aktuell { margin-left: auto; color: var(--gruen); font-weight: 700; font-size: 14px; }
.assistent-titel { font-size: 28px; margin: 12px 0 22px; line-height: 1.2; }
.feld-hinweis { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.kategorie-liste { margin-top: 14px; }
.naehrwert-feld { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 4px 10px; padding: 8px 0; }
.naehrwert-wert { display: flex; align-items: center; gap: 6px; }
.naehrwert-eingabe { text-align: right; }
.naehrwert-einheit { color: var(--text-2); width: 30px; }
.feld-pflicht { grid-column: 2; color: var(--fehler); font-size: 13px; text-align: right; }
.portion-entfernen { margin-left: auto; border: 0; background: none; font-size: 14px; }
.assistent .knopf-zweit.breit { margin-top: 18px; }
.erstellen-karte { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 18px 20px; margin-bottom: 14px; border: 0; box-shadow: var(--schatten); }
.erstellen-emoji { font-size: 24px; }
.erstellen-text { display: flex; flex-direction: column; gap: 2px; }
.erstellen-titel { font-size: 18px; }
.erstellen-unter { font-size: 14px; color: var(--text-2); }
.notiz-karte { padding: 22px 20px; text-align: center; }
.notiz-titel { font-weight: 700; font-size: 20px; }
.notiz-unter { color: var(--text-2); margin-top: 4px; }
.notiz-text { margin: 0; text-align: left; white-space: pre-wrap; font-size: 17px; }
.notiz-knopf { margin-top: 16px; padding: 10px 22px; }
.reset-haken { display: flex; gap: 12px; align-items: center; margin: 18px 0; font-weight: 600; }
.knopf-haupt.gefahr { background: var(--rot); color: #fff; margin-top: 18px; }
.knopf-haupt:disabled { opacity: .45; }