/* Schrift Inter – liegt selbst auf unserem Server (kein Google Fonts → keine Daten an Dritte). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("schrift/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("schrift/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/inter-700.woff") format("woff"); }

/* =====================================================
   Mix & Match Calories – Aussehen (Design-Agent)
   Handy zuerst: Grundregeln gelten fürs Handy,
   ab 900 px Breite kommen die Desktop-Regeln unten dazu.
   ===================================================== */

/* ---------- Design-Variablen: EINE Stelle für alle Farben & Größen ---------- */
:root {
    --hintergrund: #0b1218;
    --flaeche: #101923;
    --flaeche-hell: #18252e;
    --eingabe: #0d151c;
    --rand: #263543;

    --akzent: #86f7bd;
    --akzent-text: #06281a;
    --text: #ffffff;
    --text-grau: #9ca6ad;
    --text-blass: #6b7780;

    --farbe-kcal: #86f7bd;
    --farbe-protein: #7cc4f2;
    --farbe-kh: #f6c95e;
    --farbe-fett: #f49ac1;
    --farbe-feuer: #ff8a4c;
    --farbe-fehler: #ff7a7a;

    --radius-gross: 20px;
    --radius: 14px;
    --radius-klein: 10px;

    --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 16px 16px calc(32px + env(safe-area-inset-bottom));
    background: var(--hintergrund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.4;
    min-height: 100vh;
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

input {
    font-size: 16px; /* verhindert das automatische Hineinzoomen am iPhone */
}

/* ---------- Kopfbereich ---------- */
.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.logo {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
}

.logo span {
    color: var(--akzent);
}

.logo small {
    display: block;
    margin-top: 6px;
    color: var(--akzent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 7px;
}

.kopf-aktionen {
    display: flex;
    gap: 8px;
}

.intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0 16px;
}

.intro .beschreibung {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* Sprachwahl EN | DE */
.sprachwahl {
    display: flex;
    flex: none;
    padding: 3px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 10px;
}

.sprachwahl button {
    min-width: 40px;
    min-height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-grau);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.sprachwahl button.aktiv {
    background: var(--akzent);
    color: var(--akzent-text);
}

.beschreibung {
    margin: 14px 0 16px;
    color: var(--text-grau);
    font-size: 13px;
}

.beschreibung span {
    color: var(--akzent);
}

/* ---------- Buttons ---------- */
.knopf-primaer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    background: var(--akzent);
    color: var(--akzent-text);
    font-weight: 600;
    white-space: nowrap;
}

.knopf-primaer.breit {
    width: 100%;
}

.knopf-icon {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--rand);
    border-radius: 12px;
    background: var(--flaeche);
    font-size: 20px;
    line-height: 1;
}

.knopf-icon.klein {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-grau);
}

.knopf-zweit {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--rand);
    border-radius: 12px;
    background: var(--flaeche-hell);
}

.knopf-text {
    min-height: 44px;
    border: none;
    background: none;
    color: var(--text-grau);
    text-decoration: underline;
}

/* ---------- Creators: Story-Kreise ---------- */
.creators {
    margin: 0 0 16px;
}

.creators-titel {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.creators-unter {
    margin: 2px 0 10px;
    color: var(--text-grau);
    font-size: 12px;
}

.story-leiste {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
}

.story-leiste::-webkit-scrollbar {
    display: none;
}

.story {
    position: relative;
    flex: none;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text);
}

.story-ring {
    width: 72px;
    height: 72px;
    padding: 3px;
    border-radius: 50%;
    background: var(--rand);
}

.story.neu .story-ring {
    background: linear-gradient(135deg, var(--akzent), var(--farbe-protein), var(--akzent));
    box-shadow: 0 0 14px rgba(134, 247, 189, 0.35);
}

.story-ring img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--hintergrund);
    border-radius: 50%;
}

.story-name {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.story-neu {
    position: absolute;
    top: 58px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--akzent);
    color: var(--akzent-text);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.story.bald {
    color: var(--text-blass);
    cursor: default;
}

.story.bald .story-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px dashed var(--rand);
    font-size: 24px;
}

/* ---------- Tabs (nur Handy) ---------- */
.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 14px;
}

.tab {
    min-height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-grau);
    font-weight: 600;
}

body[data-tab="plan"] .tab[data-tab="plan"],
body[data-tab="foods"] .tab[data-tab="foods"] {
    background: var(--flaeche-hell);
    color: var(--text);
}

body[data-tab="plan"] .bereich-foods,
body[data-tab="foods"] .bereich-plan {
    display: none;
}

/* ---------- Suche & Filter ---------- */
.suche {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    min-height: 46px;
    background: var(--eingabe);
    border: 1px solid var(--rand);
    border-radius: 999px;
    color: var(--text-grau);
}

.suche input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text);
}

.filter {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    /* bei vielen Filtern seitlich wischen statt umbrechen */
    overflow-x: auto;
    scrollbar-width: none;
}

.filter::-webkit-scrollbar {
    display: none;
}

.chip {
    flex: none;
}

.chip {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--flaeche);
    color: var(--text-grau);
    font-size: 14px;
    font-weight: 500;
}

.chip.aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--akzent-text);
}

.chip-plus {
    margin-left: auto;
    width: 38px;
    padding: 0;
    font-size: 18px;
    color: var(--text);
}

/* ---------- Lebensmittel-Karten in der Liste ---------- */
.liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lm-karte {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 6px 8px 8px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    text-align: left;
}

.lm-karte:hover {
    border-color: #35495b;
}

.lm-karte.zieht {
    opacity: 0.5;
}

.lm-bild {
    width: 56px;
    height: 56px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--flaeche-hell);
    font-size: 28px;
}

.lm-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lm-bild.klein {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 22px;
}

.lm-info {
    flex: 1;
    min-width: 0;
}

.lm-name {
    font-weight: 600;
    line-height: 1.3;
    /* lange Produktnamen: höchstens zwei Zeilen, dann "…" */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.lm-name .stern {
    color: var(--farbe-kh);
}

.lm-werte {
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-grau);
    font-size: 12px;
}

.lm-werte.umbruch {
    white-space: normal;
}

.lm-bezug {
    color: var(--text-blass);
    font-size: 11px;
}

.leer {
    padding: 24px 12px;
    color: var(--text-grau);
    text-align: center;
}

/* Kompakte Liste im Auswahl-Fenster */
.liste.kompakt {
    margin-top: 12px;
    max-height: 60vh;
    overflow-y: auto;
}

/* ---------- Zusammenfassung: Datum, Ringe, Balken ---------- */
.zusammenfassung {
    padding: 14px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
}

.datum-leiste {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.knopf-pfeil {
    width: 44px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-grau);
    font-size: 26px;
    line-height: 1;
}

.datum-text {
    min-width: 150px;
    min-height: 40px;
    border: none;
    background: transparent;
    font-weight: 600;
}

.ringe {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 14px;
}

.ring {
    position: relative;
    width: 148px;
    height: 148px;
}

.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring circle {
    fill: none;
    stroke-width: 9;
}

.ring-hinten {
    stroke: #1f2c37;
}

.ring-wert {
    stroke: var(--akzent);
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
    transition: stroke-dashoffset 0.5s ease;
}

.ring.ueber .ring-wert {
    stroke: var(--farbe-feuer);
}

.ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ring-icon {
    font-size: 18px;
}

.ring-text strong {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.ring-text small {
    color: var(--text-grau);
    font-size: 11px;
}

.balken {
    display: grid;
    gap: 10px;
}

.balken-zeile {
    display: grid;
    grid-template-columns: 22px 1fr 40px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.balken-beschriftung {
    color: var(--text-grau);
}

.balken-beschriftung b {
    color: var(--text);
}

.balken-spur {
    height: 7px;
    margin-top: 4px;
    background: #1f2c37;
    border-radius: 99px;
    overflow: hidden;
}

.balken-fuellung {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}

.balken-prozent {
    color: var(--text-grau);
    text-align: right;
}

/* ---------- Mahlzeiten ---------- */
.mahlzeiten {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.mahlzeit {
    padding: 12px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    transition: border-color 0.15s, background 0.15s;
}

.mahlzeit.ziel {
    border-color: var(--akzent);
    background: #10231f;
}

.mahlzeit-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.mahlzeit-kopf h3 {
    margin: 0;
    font-size: 15px;
}

.mahlzeit-kopf span {
    color: var(--akzent);
    font-size: 13px;
    font-weight: 600;
}

.eintraege {
    display: grid;
    gap: 8px;
}

.eintrag {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px;
    background: var(--flaeche-hell);
    border-radius: var(--radius);
}

.eintrag-info {
    min-width: 0;
}

.eintrag-oben {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.eintrag-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.eintrag-werte {
    color: var(--text-grau);
    font-size: 12px;
}

.eintrag-entfernen {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-blass);
    font-size: 16px;
}

/* Mengen-Steuerung (− 100 g +) – im Tagesplan und im Formular */
.menge-steuerung {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    margin-top: 6px;
    background: var(--eingabe);
    border: 1px solid var(--rand);
    border-radius: 999px;
}

.rund {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--rand);
    background: #1c2a35;
    font-size: 18px;
    line-height: 1;
}

.rund.plus {
    border-color: var(--akzent);
    color: var(--akzent);
    background: transparent;
}

.menge-wert {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
}

.menge-wert input {
    width: 46px;
    padding: 4px 0;
    border: none;
    background: transparent;
    text-align: right;
    font-weight: 600;
    outline: none;
}

.menge-wert span {
    padding-right: 6px;
}

.knopf-hinzu {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border: 1.5px dashed var(--rand);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-grau);
    font-size: 14px;
}

.knopf-hinzu:hover {
    border-color: var(--akzent);
    color: var(--akzent);
}

/* ---------- Fenster (Dialoge): am Handy als "Bottom Sheet" ---------- */
.fenster {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    background: var(--flaeche);
    color: var(--text);
    border: 1px solid var(--rand);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    overflow-y: auto;
}

.fenster::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.fenster-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.fenster-kopf h2 {
    margin: 0;
    font-size: 18px;
}

.fenster-aktionen {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.fenster-aktionen.zwei > * {
    flex: 1;
}

.unterzeile {
    margin: 0 0 10px;
    color: var(--text-grau);
    font-size: 13px;
}

.zwischentitel {
    margin: 24px 0 6px;
    font-size: 15px;
}

/* ---------- Eingabe-Karte (Entwurf 4) ---------- */
.eingabe-karte {
    display: flex;
    gap: 14px;
    padding: 12px;
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
}

.foto-feld {
    position: relative;
    width: 96px;
    height: 96px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed #3a4a58;
    border-radius: 14px;
    cursor: pointer;
}

.foto-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--akzent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-align: center;
}

.foto-icon {
    font-size: 22px;
}

#fotoVorschau,
.foto-vorschau {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.foto-feld.hat-foto {
    border-style: solid;
    border-color: var(--rand);
}

.foto-feld.hat-foto #fotoVorschau,
.foto-feld.hat-foto .foto-vorschau {
    display: block;
}

.foto-feld.hat-foto .foto-text {
    display: none;
}

.eingabe-rechts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.eingabe-name {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    background: var(--eingabe);
    border: 1px solid var(--rand);
    border-radius: 12px;
    outline: none;
}

.eingabe-name:focus,
.wert-feld:focus-within,
.suche:focus-within {
    border-color: var(--akzent);
}

.werte-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.wert-feld {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 12px;
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: 12px;
}

.wert-feld input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-weight: 600;
}

.wert-icon {
    font-size: 18px;
}

.einheit {
    color: var(--text-grau);
    font-size: 12px;
    white-space: nowrap;
}

.mehr-werte {
    margin-top: 12px;
}

.mehr-werte summary {
    color: var(--text-grau);
    font-size: 13px;
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.hinweis {
    margin: 12px 0 0;
    color: var(--text-blass);
    font-size: 12px;
}

.fehler {
    min-height: 1em;
    margin: 6px 0 0;
    color: var(--farbe-fehler);
    font-size: 13px;
}

/* ---------- Aktionen-Fenster ---------- */
.mahlzeit-knoepfe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mahlzeit-knoepfe button {
    min-height: 44px;
    border: 1px solid var(--akzent);
    border-radius: 12px;
    background: transparent;
    color: var(--akzent);
    font-weight: 600;
}

.aktionen-liste {
    display: grid;
    gap: 6px;
    margin-top: 16px;
}

.aktion {
    min-height: 48px;
    padding: 0 14px;
    border: none;
    border-radius: 12px;
    background: var(--flaeche-hell);
    text-align: left;
}

.aktion.gefahr {
    color: var(--farbe-fehler);
}

.aktion.gefahr.sicher {
    background: var(--farbe-fehler);
    color: #2a0b0b;
    font-weight: 600;
}

/* ---------- Einstellungen ---------- */
.ziele {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.ziele label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: 12px;
}

.ziele .ziel-wert {
    color: var(--text-grau);
    font-size: 13px;
}

.ziele input {
    width: 70px;
    border: none;
    background: transparent;
    text-align: right;
    font-weight: 600;
    outline: none;
    color: var(--text);
}

.quellen {
    margin: 20px 0 0;
    color: var(--text-blass);
    font-size: 11px;
    line-height: 1.5;
}

/* ---------- Neu anlegen: Lebensmittel oder Rezept ---------- */
.neu-auswahl {
    display: grid;
    gap: 10px;
}

.neu-karte {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche-hell);
    text-align: left;
}

.neu-karte:hover {
    border-color: var(--akzent);
}

.neu-icon {
    font-size: 30px;
}

.neu-karte b {
    display: block;
    font-size: 16px;
}

.neu-karte small {
    color: var(--text-grau);
    font-size: 13px;
}

/* ---------- Rezept ---------- */
#rezeptZutaten:empty::before {
    content: attr(data-leer);
    display: block;
    padding: 10px 0;
    color: var(--text-grau);
    font-size: 13px;
}

.rezept-summe {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 12px;
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: 12px;
    color: var(--text-grau);
    font-size: 13px;
}

.rezept-summe b {
    color: var(--akzent);
    font-weight: 600;
}

.rezept-summe:empty {
    display: none;
}

/* ---------- Kochbuch: Anleitung & Rezept-Ansicht ---------- */
.anleitung-feld {
    width: 100%;
    padding: 12px 14px;
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    border-radius: 12px;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}

.anleitung-feld:focus {
    border-color: var(--akzent);
}

.ansicht-kopf {
    display: flex;
    gap: 14px;
    align-items: center;
}

.lm-bild.gross {
    width: 104px;
    height: 104px;
    border-radius: 18px;
    font-size: 52px;
}

.ansicht-portion {
    margin: 0 0 6px;
    color: var(--text-grau);
    font-size: 13px;
}

.ansicht-werte {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 14px;
    font-weight: 600;
}

.ansicht-100 {
    margin: 6px 0 0;
    color: var(--text-blass);
    font-size: 12px;
}

.ansicht-zutaten {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ansicht-zutaten li {
    display: grid;
    grid-template-columns: 28px 72px 1fr;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--flaeche-hell);
    border-radius: 10px;
    font-size: 14px;
}

.ansicht-zutaten .menge {
    color: var(--akzent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ansicht-zutaten .fehlt {
    color: var(--farbe-fehler);
    font-size: 12px;
}

.ansicht-anleitung {
    margin: 0 0 20px;
    white-space: pre-line;
    line-height: 1.6;
    font-size: 15px;
}

.ansicht-anleitung.leer-text {
    color: var(--text-grau);
}

/* ---------- Creator-Profil ---------- */
.creator-kopf {
    display: flex;
    align-items: center;
    gap: 16px;
}

.creator-foto {
    width: 92px;
    height: 92px;
    flex: none;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--akzent);
}

.creator-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Initialen, solange kein Porträt da ist */
.creator-initialen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 3px solid var(--hintergrund);
    border-radius: 50%;
    background: linear-gradient(135deg, #1d3b33, #18252e);
    color: var(--akzent);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}

.creator-foto .creator-initialen {
    border: none;
    font-size: 30px;
}

.creator-info {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.creator-titel {
    margin: 0;
    color: var(--text-grau);
    font-size: 14px;
}

.creator-insta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--akzent);
    color: var(--akzent-text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.creator-bio {
    display: grid;
    gap: 4px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.creator-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.creator-codes button {
    min-height: 40px;
    padding: 0 12px;
    border: 1px dashed var(--akzent);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
}

.creator-codes b {
    color: var(--akzent);
    letter-spacing: 1px;
}

.creator-link {
    margin: 12px 0 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--akzent);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

/* ---------- Meldung (Toast) ---------- */
.meldung {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 50;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    background: #1f2d38;
    border: 1px solid var(--rand);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 0.2s, transform 0.2s;
}

.meldung.sichtbar {
    opacity: 1;
    transform: translate(-50%, 0);
}

.meldung.fehler-meldung {
    border-color: var(--farbe-fehler);
}

/* ---------- Sehr schmale Handys ---------- */
@media (max-width: 370px) {
    .ring {
        width: 128px;
        height: 128px;
    }

    .ring-text strong {
        font-size: 22px;
    }

    .knopf-primaer {
        padding: 0 12px;
    }
}

/* =====================================================
   Desktop: ab 900 px Breite
   Lebensmittel links, Tag rechts – wie im großen Entwurf
   ===================================================== */
@media (min-width: 900px) {
    body {
        max-width: 1280px;
        margin: 0 auto;
        padding: 28px 32px 40px;
    }

    .logo {
        font-size: 34px;
    }

    .tabs {
        display: none;
    }

    .filter {
        flex-wrap: wrap;
        overflow: visible;
    }

    .story,
    .story-name {
        width: 88px;
        max-width: 88px;
    }

    .story-ring {
        width: 84px;
        height: 84px;
    }

    .story-neu {
        top: 70px;
    }

    body[data-tab] .bereich-foods,
    body[data-tab] .bereich-plan {
        display: block;
    }

    .layout {
        display: grid;
        grid-template-columns: 390px 1fr;
        gap: 20px;
        align-items: start;
    }

    .bereich-foods {
        position: sticky;
        top: 20px;
        padding: 14px;
        background: var(--flaeche);
        border: 1px solid var(--rand);
        border-radius: var(--radius-gross);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .bereich-foods .lm-karte .knopf-icon.klein {
        width: 24px;
    }

    .bereich-foods .lm-karte {
        background: var(--flaeche-hell);
        border-color: transparent;
        cursor: grab;
    }

    .zusammenfassung {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "datum datum"
            "ringe balken";
        gap: 10px 28px;
        align-items: center;
        padding: 18px 24px;
    }

    .datum-leiste { grid-area: datum; }
    .ringe { grid-area: ringe; margin: 0; }
    .balken { grid-area: balken; }

    .mahlzeiten {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /* Fenster in der Mitte statt unten */
    .fenster {
        max-width: 520px;
        margin: auto;
        border-bottom: 1px solid var(--rand);
        border-radius: 22px;
        padding: 22px;
    }
}


/* ===== Online-Suche (Open Food Facts) ===== */
.online { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.online-knopf {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px; border-radius: var(--radius, 16px); cursor: pointer;
    background: transparent; color: var(--text, #fff);
    border: 1px dashed var(--akzent, #86f7bd);
}
.online-knopf:hover, .online-knopf:focus-visible { background: rgba(134, 247, 189, 0.08); }
.online-icon { font-size: 22px; flex: none; }
.online-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.online-text strong { font-size: 15px; overflow-wrap: anywhere; }
.online-text small { font-size: 12px; color: var(--text-grau); }
.online-status, .online-quelle { margin: 4px 2px; font-size: 13px; color: var(--text-grau); }
.online-status.fehler { color: var(--farbe-fehler); }
.online-treffer { width: 100%; text-align: left; }

/* ===== Barcode-Scanner ===== */
.suche-scan {
    flex: none; display: grid; place-items: center;
    width: 36px; height: 36px; margin-right: -8px;
    border: none; border-radius: 999px; background: transparent;
    color: var(--akzent); cursor: pointer;
}
.suche-scan:hover, .suche-scan:focus-visible { background: rgba(134, 247, 189, 0.12); }
.scan-kamera {
    position: relative; overflow: hidden; border-radius: var(--radius);
    background: #000; aspect-ratio: 4 / 3; margin-bottom: 12px;
}
.scan-kamera.aus { display: none; }
.scan-kamera video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-rahmen {
    position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%;
    border: 2px solid var(--akzent); border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}
.scan-status { margin: 0 0 10px; font-size: 14px; color: var(--text-grau); }
.scan-ergebnis { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.scan-zeile { display: flex; gap: 8px; margin-top: 6px; }
.scan-zeile input { flex: 1; min-width: 0; }
.scan-zeile .knopf-primaer { flex: none; }
#scanNochmal { width: 100%; margin-top: 8px; }
.scan-feld { display: block; font-size: 13px; color: var(--text-grau); }

/* ===== Version 2.0: Mein Tag – Suchleiste oben + Sport-Knopf ===== */
.tag-oben { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.tag-suche { flex: 1; min-width: 0; }
.knopf-sport {
    flex: none; display: flex; align-items: center; gap: 6px;
    padding: 0 16px; min-height: 46px; border-radius: 999px;
    border: none; background: var(--akzent); color: var(--akzent-text);
    font-weight: 700; font-size: 15px; cursor: pointer;
}
.knopf-sport:hover { filter: brightness(1.05); }
.tag-treffer {
    margin-bottom: 12px; padding: 8px; border-radius: var(--radius-gross);
    background: var(--flaeche); border: 1px solid var(--rand);
    display: flex; flex-direction: column; gap: 6px;
}
.tag-treffer .lm-karte { width: 100%; text-align: left; }
.schnellwahl {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.schnellwahl::-webkit-scrollbar { display: none; }
.schnellwahl[hidden] { display: none; }
.schnell-chip {
    flex: none; display: flex; align-items: center; gap: 6px; max-width: 200px;
    padding: 8px 12px; border-radius: 999px; cursor: pointer;
    background: var(--flaeche-hell); border: 1px solid var(--rand); color: var(--text); font-size: 14px;
}
.schnell-chip:hover, .schnell-chip:focus-visible { border-color: var(--akzent); }
.schnell-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leer.klein { padding: 10px 6px; font-size: 13px; }
.mahlzeiten { display: block; }

/* ===== Sport ===== */
.sport-tag { margin-top: 12px; }
.sport-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sport-eintrag { display: flex; align-items: center; gap: 6px; }
.sport-zeile {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; text-align: left; cursor: pointer;
    background: var(--flaeche-hell); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text);
}
.sport-karte .sport-zeile { margin-bottom: 6px; }
.sport-zeile:hover { border-color: var(--akzent); }
.sport-icon { font-size: 22px; flex: none; }
.sport-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sport-info strong { font-size: 15px; overflow-wrap: anywhere; }
.sport-info small { font-size: 12px; color: var(--text-grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-arten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.sport-art {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px;
    background: var(--flaeche-hell); border: 1px solid var(--rand); border-radius: var(--radius);
    color: var(--text); cursor: pointer; text-align: center;
}
.sport-art span { font-size: 26px; }
.sport-art b { font-size: 14px; }
.sport-art small { font-size: 11px; color: var(--text-grau); }
.sport-art:hover { border-color: var(--akzent); }
.knopf-zweit.breit { width: 100%; }
.sport-paket { margin-top: 14px; }
.block-titel { margin: 14px 0 8px; font-size: 14px; color: var(--text-grau); font-weight: 600; }
.block-titel[hidden] { display: none; }
.knopf-icon.sicher { width: auto; padding: 0 10px; color: var(--farbe-fehler); font-size: 12px; }

/* Übung bearbeiten */
#uebungName { margin-bottom: 12px; }
.uebung-video { margin-bottom: 12px; }
.video-hoch {
    width: min(60%, 220px); aspect-ratio: 9 / 16; margin: 0 auto 10px;
    border-radius: var(--radius); overflow: hidden; background: #000;
}
.video-hoch[hidden] { display: none; }
.video-hoch video { width: 100%; height: 100%; object-fit: contain; display: block; }
.video-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.video-knoepfe > * { flex: 1; min-width: 140px; }
.video-knoepfe [hidden] { display: none; }
.saetze { display: flex; flex-direction: column; gap: 6px; }
.satz-zeile { display: flex; align-items: center; gap: 6px; }
.satz-nr { flex: none; width: 52px; font-size: 13px; color: var(--text-grau); }
.satz-feld, .satz-text {
    min-width: 0; min-height: 42px; padding: 0 10px;
    background: var(--eingabe); border: 1px solid var(--rand); border-radius: 10px;
    color: var(--text); outline: none; font-weight: 600;
}
.satz-feld { width: 56px; flex: none; text-align: center; }
.satz-text { flex: 1; font-weight: 400; }
.satz-feld:focus, .satz-text:focus { border-color: var(--akzent); }
.satz-einheit { flex: none; font-size: 12px; color: var(--text-grau); }
#uebungKraft[hidden], #uebungAusdauer[hidden] { display: none; }
#uebungNotiz { margin-top: 12px; }
#uebungLoeschen { width: 100%; margin-top: 8px; }
#uebungLoeschen[hidden] { display: none; }
.tag-treffer[hidden] { display: none; }

/* ===== Konto & Trainer ===== */
.knopf-konto { font-size: 18px; position: relative; }
.knopf-konto.angemeldet::after {
    content: ""; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--akzent); border: 2px solid var(--hintergrund);
}
.konto-inhalt { display: flex; flex-direction: column; gap: 10px; }
.konto-tabs { display: flex; gap: 8px; }
.konto-form { display: flex; flex-direction: column; gap: 10px; }
.konto-sync { margin: 0; font-size: 12px; color: var(--text-grau); }
.konto-inhalt .aktion { margin-top: 8px; }
.trainer-zeile {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--flaeche-hell); border: 1px solid var(--rand); border-radius: var(--radius);
}
.trainer-zeile.offen { border-style: dashed; }
.trainer-zeile .knopf-primaer, .trainer-zeile .knopf-zweit { flex: none; min-height: 40px; padding: 0 12px; }
.trainer-uebung { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.schalter { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; margin-top: 4px; }
.schalter input { width: 20px; height: 20px; accent-color: var(--akzent); flex: none; }
.einladecode {
    display: inline-block; margin: 4px 0; padding: 4px 10px; border-radius: 8px;
    background: var(--eingabe); border: 1px dashed var(--akzent); color: var(--akzent);
    font-size: 20px; font-weight: 700; letter-spacing: 3px; width: fit-content;
}
.sport-arten.klein .sport-art { padding: 8px 4px; }
.sport-arten.klein .sport-art span { font-size: 20px; }
.trainer-summe { font-size: 13px; color: var(--akzent); margin: 8px 2px; }
#trainerEssenBox { margin-top: 12px; }
#trainerEssenBox[hidden] { display: none; }
#dialogTrainer .datum-leiste { margin-bottom: 4px; }

/* Vorschläge vom Trainer in "Mein Tag" */
.vorschlaege { margin-bottom: 12px; }
.vorschlaege[hidden] { display: none; }
.vorschlag-karte { border-color: var(--akzent); border-style: dashed; }
.vorschlag-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 4px; }
.vorschlag-ja { color: var(--akzent); font-size: 18px; }

/* Schmale Handys: "Hinzufügen" nur als ＋, damit der Konto-Knopf Platz hat */
@media (max-width: 440px) {
    #knopfNeu [data-t="neu"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    #knopfNeu { min-width: 46px; padding: 0 14px; font-size: 20px; }
    .kopf-aktionen { gap: 6px; }
}
.knopf-icon.vorschlag-ja { color: var(--akzent); border-color: var(--akzent); }
#trainerInhalt .trainer-zeile { margin-bottom: 8px; }
#kontoCode::placeholder { text-transform: none; }

/* ===== Version 2.2: Sessions + freie Felder ===== */
.session-name { margin-bottom: 12px; font-weight: 600; }
.sport-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.sport-knoepfe > * { min-height: 48px; }
#sportSessions, #sportSessionSpeichern { margin-top: 8px; }
#sportSessionSpeichern[hidden] { display: none; }
.felder-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.felder-wahl .chip { min-height: 38px; }
.satz-zeile { flex-wrap: wrap; row-gap: 6px; }
.satz-nr { width: 26px; }
.satz-feld { width: 62px; }
.satz-feld.zeit { width: 70px; }
.satz-text { flex: 1 1 120px; }
.block-titel[hidden], #blockGanze:empty, #blockEinzeln:empty { display: none; }

/* =====================================================
   Version 3: neue Startseite (Kopf mit Stories, Kennzahlen, Leiste unten)
   ===================================================== */
body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Kopf: Logo links, Story-Kreise rechts */
.kopf { align-items: center; gap: 10px; margin-bottom: 14px; }
.kopf .logo { flex: none; font-size: 26px; line-height: 1.05; }
.kopf .logo small { margin-top: 4px; font-size: 10px; letter-spacing: 6px; }
.kopf .creators { flex: 1; min-width: 0; margin: 0; }
.kopf .creators-titel, .kopf .creators-unter {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.kopf .story-leiste { justify-content: flex-end; gap: 10px; padding: 2px 0 2px; }
.kopf .story, .kopf .story-name { width: 58px; max-width: 58px; }
.kopf .story-ring { width: 54px; height: 54px; padding: 2.5px; }
.kopf .story-neu { top: 44px; font-size: 8px; }
.kopf .story-name { font-size: 10px; }
.kopf .story.bald .story-ring { font-size: 20px; }

/* Mein Tag: Titel + Datum */
.tag-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.tag-titel { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.bereich-training .tag-titel, .bereich-profil .tag-titel { margin-bottom: 14px; }
.tag-kopf .datum-leiste { gap: 0; }
.tag-kopf .datum-text { min-width: 0; padding: 0 4px; font-size: 14px; }
.tag-kopf .knopf-pfeil { width: 34px; font-size: 24px; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.kpi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0;
    padding: 9px 8px 8px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px;
}
.kpi-icon { font-size: 16px; line-height: 1; margin-bottom: 4px; }
.kpi strong { font-size: 17px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.kpi-einheit { font-size: 11px; color: var(--text-grau); }
.kpi-spur { display: block; width: 100%; height: 4px; margin: 6px 0 3px; border-radius: 4px; background: var(--rand); overflow: hidden; }
.kpi-spur i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--farbe); transition: width 0.3s; }
.kpi.ueber .kpi-spur i { background: var(--farbe-feuer); }
.kpi small { font-size: 10px; color: var(--text-blass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.schnell-chips { display: flex; gap: 8px; margin: 0 0 8px; }
.schnell-chips .chip { min-height: 36px; }

/* Sport & Sessions: grüne Karte */
.sport-karte { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.sport-karte .mahlzeit-kopf h3 { color: var(--akzent-text); font-size: 17px; }
.sport-karte-oben { display: flex; gap: 12px; align-items: center; }
.sport-karte-text { flex: 1; min-width: 0; }
.sport-karte-name { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.sport-karte-bild { flex: none; width: 118px; height: 70px; border-radius: 12px; overflow: hidden; background: #000; }
.sport-karte-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sport-karte-liste { margin-top: 10px; }
.sport-karte-liste:empty { display: none; }
.sport-karte .sport-zeile { background: rgba(6, 40, 26, 0.12); border-color: rgba(6, 40, 26, 0.18); color: var(--akzent-text); }
.sport-karte .sport-info small { color: rgba(6, 40, 26, 0.75); }
.sport-karte .leer.klein { color: var(--akzent-text); }
.sport-karte-knoepfe { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.knopf-dunkel {
    flex: 1; min-height: 46px; border: none; border-radius: 14px; cursor: pointer;
    background: var(--hintergrund); color: var(--akzent); font-weight: 700; font-size: 15px;
}
.knopf-link { flex: none; min-height: 46px; padding: 0 6px; border: none; background: transparent; color: var(--akzent-text); font-weight: 600; cursor: pointer; }

/* Training & Profil */
.training-heute {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; text-align: left; cursor: pointer;
    background: var(--akzent); color: var(--akzent-text); border: none; border-radius: var(--radius-gross); margin-bottom: 4px;
}
.training-heute .sport-info small { color: rgba(6, 40, 26, 0.75); }
.sport-zeile:disabled { cursor: default; opacity: 1; }
.profil-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.profil-zeile {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text);
}
button.profil-zeile { cursor: pointer; }
button.profil-zeile:hover { border-color: var(--akzent); }
.profil-zeile[hidden] { display: none; }
.bereich-profil .beschreibung { color: var(--text-grau); font-size: 13px; }

/* Bereiche je nach Tab */
.bereich-training, .bereich-profil { display: none; }
body[data-tab="training"] .bereich-plan, body[data-tab="training"] .bereich-foods,
body[data-tab="profil"] .bereich-plan, body[data-tab="profil"] .bereich-foods { display: none; }
body[data-tab="training"] .bereich-training, body[data-tab="profil"] .bereich-profil { display: block; }

/* Leiste unten */
.unten-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(16, 25, 35, 0.96); border-top: 1px solid var(--rand);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.unten-nav .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 52px; padding: 4px 0; border-radius: 12px; background: transparent; color: var(--text-grau); font-weight: 600;
}
.nav-icon { font-size: 20px; line-height: 1.2; filter: grayscale(0.6); }
.nav-text { font-size: 11px; white-space: nowrap; }
body[data-tab="plan"] .unten-nav .tab[data-tab="plan"],
body[data-tab="foods"] .unten-nav .tab[data-tab="foods"],
body[data-tab="training"] .unten-nav .tab[data-tab="training"],
body[data-tab="profil"] .unten-nav .tab[data-tab="profil"] { color: var(--akzent); background: transparent; }
body[data-tab="plan"] .tab[data-tab="plan"] .nav-icon,
body[data-tab="foods"] .tab[data-tab="foods"] .nav-icon,
body[data-tab="training"] .tab[data-tab="training"] .nav-icon,
body[data-tab="profil"] .tab[data-tab="profil"] .nav-icon { filter: none; }
.nav-plus {
    justify-self: center; width: 56px; height: 56px; margin-bottom: 4px; border: none; border-radius: 50%;
    background: var(--akzent); color: var(--akzent-text); font-size: 30px; font-weight: 600; line-height: 1;
    box-shadow: 0 6px 20px rgba(134, 247, 189, 0.35); cursor: pointer;
}
.nav-punkt { position: absolute; top: 4px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.nav-punkt[hidden] { display: none; }

@media (min-width: 900px) {
    .kopf .logo { font-size: 34px; }
    .kopf .creators-titel, .kopf .creators-unter { position: static; width: auto; height: auto; clip: auto; }
    .kopf .creators { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
    .kopf .story, .kopf .story-name { width: 70px; max-width: 70px; }
    .kopf .story-ring { width: 64px; height: 64px; }
    .kopf .story-neu { top: 52px; }
    .unten-nav { left: 50%; right: auto; width: 520px; transform: translateX(-50%); bottom: 14px; border: 1px solid var(--rand); border-radius: 22px; padding-bottom: 8px; }
    body[data-tab="training"] .layout, body[data-tab="profil"] .layout { display: block; max-width: 720px; margin: 0 auto; }
    .kpi strong { font-size: 22px; }
    .kpi { padding: 12px; }
}
.meldung { bottom: calc(100px + env(safe-area-inset-bottom)) !important; z-index: 30; }

.gemeinsam-schalter { margin: 10px 2px 0; padding: 10px 12px; border: 1px dashed var(--akzent); border-radius: var(--radius); }
.gemeinsam-schalter[hidden] { display: none; }

/* Gramm ↔ Stück */
.einheit-knopf {
    flex: none; min-width: 34px; height: 28px; padding: 0 6px; margin-left: 2px;
    border: 1px solid var(--akzent); border-radius: 8px; background: transparent;
    color: var(--akzent); font-size: 13px; font-weight: 700; cursor: pointer;
}
.eintrag-gramm { font-size: 11px; color: var(--text-grau); margin-top: 2px; }

/* ===== iPhone: nichts oben abschneiden ===== */
/* Als Web-App (Home-Bildschirm) liegt die Statusleiste über der Seite → Platz lassen */
/* Version 3.3: weniger Rand – der Bereich unter der Statusleiste ist großzügig, 10 px davon dürfen wir nutzen */
/* iOS 26 legt oben einen Unschärfe-"Nebel" über den Bereich unter der Statusleiste – nichts darf da drin liegen */
body { padding-top: max(12px, calc(env(safe-area-inset-top) + 22px)); }
/* Fenster nie höher als der sichtbare Bereich (auch wenn die Tastatur offen ist) */
.fenster {
    max-height: calc(var(--sichtbar, 100dvh) - env(safe-area-inset-top) - 12px);
    overscroll-behavior: contain;
}
/* Trefferliste der Suche: eigene Scrollfläche statt die ganze Seite zu verschieben */
.tag-treffer { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
html { -webkit-text-size-adjust: 100%; }

/* ===== Version 3.3 ===== */
/* Menge: − 70 + und daneben direkt g | Stk. umschalten */
.menge-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.menge-zeile .menge-steuerung { margin-top: 0; }
.einheit-wahl {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--eingabe); border: 1px solid var(--rand); border-radius: 999px;
}
.einheit-option {
    min-width: 40px; height: 32px; padding: 0 10px;
    border: none; border-radius: 999px; background: transparent;
    color: var(--text-grau); font-size: 14px; font-weight: 600;
}
.einheit-option.aktiv { background: var(--akzent); color: #06281a; }
.online-nochmal { margin-top: 6px; }
.online-status.laedt::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid var(--rand); border-top-color: var(--akzent); border-radius: 50%;
    animation: online-dreh 0.8s linear infinite;
}
@keyframes online-dreh { to { transform: rotate(360deg); } }

/* Kein Hineinzoomen: kein Doppeltipp-Zoom, Eingabefelder mind. 16 px (sonst zoomt das iPhone beim Antippen) */
html, body { touch-action: manipulation; }
input, select, textarea, .menge-wert input { font-size: 16px !important; }

/* ===== Version 3.4 ===== */
/* Fenster sitzen immer ÜBER der Tastatur und passen in den sichtbaren Bereich (scrollbar) */
.fenster[open] {
    margin-bottom: var(--tastatur, 0px);
    max-height: calc(var(--sichtbar, 100dvh) - max(env(safe-area-inset-top), 12px) - 8px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) { .fenster[open] { margin-bottom: auto; } }

/* Oberer Bereich: Kennzahlen kompakt (Icon + Zahl in einer Zeile) */
.kpi-zeile { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kpi-zeile .kpi-icon { margin: 0; font-size: 17px; }
.kpi-zeile strong { font-size: 18px; }
.kpi small { font-size: 11px; }

/* Suchleiste + runde Icon-Knöpfe ⭐ 🕘 📖 */
.tag-oben { gap: 6px; }
.icon-knopf {
    flex: none; width: 46px; min-height: 46px; padding: 0;
    border-radius: 50%; border: 1px solid var(--rand); background: var(--flaeche);
    font-size: 19px; line-height: 1; display: grid; place-items: center;
}
.icon-knopf.aktiv { border-color: var(--akzent); background: rgba(134, 247, 189, 0.14); }
.tag-oben .tag-suche { padding: 0 10px 0 12px; gap: 6px; }
.tag-oben .tag-suche input { min-width: 0; }
@media (max-width: 380px) { .icon-knopf { width: 40px; min-height: 42px; font-size: 17px; } }

.knopf-sport.breit { width: 100%; justify-content: center; min-height: 48px; margin: 2px 0 14px; }

/* Panel ⭐ Favoriten / 🕘 Zuletzt */
.schnell-panel {
    margin-bottom: 12px; padding: 8px; border-radius: var(--radius-gross);
    background: var(--flaeche); border: 1px solid var(--rand);
    display: flex; flex-direction: column; gap: 6px;
    max-height: 52vh; overflow-y: auto; overscroll-behavior: contain;
}
.schnell-panel[hidden] { display: none; }
.schnell-kopf { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.schnell-zeile { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; transition: background 0.3s; }
.schnell-dazu {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 8px; border: none; background: transparent; color: inherit;
}
.stern-knopf {
    flex: none; width: 36px; height: 36px; border: none; background: transparent;
    color: var(--text-grau); font-size: 21px; line-height: 1;
}
.stern-knopf.an { color: #ffd34d; }
.schnell-zeile.eben-dazu { background: rgba(134, 247, 189, 0.18); }

/* Sport: Kategorien & Vorschläge */
.kategorie-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: none; }
.kategorie-chips::-webkit-scrollbar { display: none; }
.kategorie-chips[hidden] { display: none; }
.kategorie-chips .chip { flex: none; }
.bib-kat { margin: 12px 2px 4px; font-weight: 700; color: var(--akzent); }
.uebung-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.uebung-vorschlaege[hidden] { display: none; }

/* Sport-Fenster: groß genug, damit man alles sieht */
#dialogSport[open] { min-height: min(82vh, calc(var(--sichtbar, 100dvh) - 40px)); }
.suche-mikro { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: none; border-radius: 999px; background: transparent; font-size: 18px; padding: 0; line-height: 1; cursor: pointer; }
.suche-mikro.hoert { background: rgba(255, 122, 122, 0.25); animation: mikro-puls 1s ease-in-out infinite; }
@keyframes mikro-puls { 50% { transform: scale(1.25); } }

/* Menge direkt beim Eintragen */
.menge-frage {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px; margin: -2px 0 4px; border-radius: 14px;
    background: rgba(134, 247, 189, 0.08); border: 1px solid var(--akzent);
}
.menge-frage-titel { width: 100%; font-size: 13px; color: var(--text-grau); }
.menge-frage input {
    width: 90px; min-height: 42px; padding: 0 12px; border-radius: 12px;
    border: 1px solid var(--rand); background: var(--eingabe); color: var(--text); font-weight: 700; text-align: right;
}
.menge-frage .knopf-primaer { min-height: 42px; padding: 0 16px; margin-left: auto; }
.treffer-zeile { display: flex; align-items: center; gap: 4px; }
.treffer-zeile > .lm-karte { flex: 1; min-width: 0; }
.schnell-plus-direkt { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--akzent); background: transparent; color: var(--akzent); font-size: 20px; }

/* Versionsnummer im Profil */
.app-version { text-align: center; font-size: 12px; color: var(--text-grau); margin: 8px 0 0; }

/* 📲 Anleitung "Als App speichern" */
.app-warum { color: var(--text-grau); margin: 0 0 12px; }
.app-system { font-size: 15px; margin: 16px 0 6px; }
.app-schritte { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.45; }
.app-schritte b { color: var(--akzent); font-weight: 600; }
#appInstallierenJetzt { width: 100%; margin-bottom: 4px; }
#appInstallierenJetzt[hidden] { display: none; }

/* Wisch-Leisten (Filter, Kategorien): bis an den Bildschirmrand, letzter Knopf mit Abstand,
   weiche Kante zeigt "da geht's weiter" */
@media (max-width: 899px) {
    .filter, .kategorie-chips {
        margin-left: -16px; margin-right: -16px;
        padding-left: 16px; padding-right: 16px;
        scroll-padding-left: 16px; scroll-padding-right: 16px;
    }
    .filter::after, .kategorie-chips::after { content: ""; flex: none; width: 1px; } /* Abstand nach dem letzten Knopf */
    .wisch-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
    .wisch-links { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
    .wisch-links.wisch-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}

/* Suche in „Mein Tag“: das Feld bleibt immer mindestens ~170 px breit.
   Reicht der Platz nicht (kleine Handys), rutschen ⭐ 🕘 📖 in die nächste Zeile. */
.tag-oben { flex-wrap: wrap; justify-content: flex-end; }
.tag-oben .tag-suche { flex: 1 1 196px; }
/* In der schmalen Tages-Suche: Lupe weg (der Platzhalter sagt "suchen"), 🎤 und Scan etwas kompakter */
.tag-oben .tag-suche > span[aria-hidden="true"] { display: none; }
.tag-oben .tag-suche .suche-mikro, .tag-oben .tag-suche .suche-scan { width: 32px; height: 36px; }
.tag-oben .tag-suche .suche-scan { margin-right: -4px; }
.tag-oben .tag-suche input::-webkit-search-cancel-button { display: none; }
@media (max-width: 372px) { .tag-oben { gap: 4px; } .icon-knopf { width: 38px; min-height: 42px; font-size: 16px; } }
/* Sehr kleine Handys: Suche über die ganze Breite, ⭐ 🕘 📖 gemeinsam darunter */
@media (max-width: 340px) { .tag-oben .tag-suche { flex-basis: 100%; } }

/* =====================================================
   Version 4.0 – neues Design (Entwurf v5 von Ivy)
   ===================================================== */
.unten-nav { grid-template-columns: repeat(4, 1fr); align-items: center; }

/* Daily Bites nur auf "Heute" – auf den anderen Seiten bleibt oben nur das Logo */
body:not([data-tab="plan"]) .creators { display: none; }
@media (min-width: 900px) { body .creators { display: block; } }

/* Kennzahlen + 👁 */
.kpi-bereich { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.kpi-bereich .kpis { flex: 1; min-width: 0; margin-bottom: 0; }
.kpis[data-anzahl="1"] { grid-template-columns: 1fr; }
.kpis[data-anzahl="2"] { grid-template-columns: repeat(2, 1fr); }
.kpis[data-anzahl="3"] { grid-template-columns: repeat(3, 1fr); }
.kpis[data-anzahl="0"] { display: none; }
.kpi[hidden] { display: none; }
.kpi-frei { display: none; }
/* Nur eine Kachel → groß, mit "noch … frei" */
.kpis[data-anzahl="1"] .kpi { padding: 14px 16px; position: relative; }
.kpis[data-anzahl="1"] .kpi-icon { font-size: 24px; }
.kpis[data-anzahl="1"] .kpi strong { font-size: 32px; }
.kpis[data-anzahl="1"] .kpi-zeile { gap: 10px; }
.kpis[data-anzahl="1"] .kpi-spur { height: 8px; margin: 10px 0 6px; }
.kpis[data-anzahl="1"] .kpi small { font-size: 14px; }
.kpis[data-anzahl="1"] #kpiKcal .kpi-frei { display: block; position: absolute; top: 20px; right: 16px; font-size: 13px; font-weight: 600; color: var(--akzent); }
.kpi-frei.drueber { color: var(--farbe-fehler) !important; }
.knopf-auge {
    flex: none; width: 52px; min-height: 52px; border-radius: 16px; border: 1px solid var(--rand);
    background: var(--flaeche); color: var(--text); font-size: 20px; cursor: pointer;
}
.knopf-auge:hover, .knopf-auge:focus-visible { border-color: var(--akzent); }

/* ＋ Essen / ＋ Training */
.plus-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.plus-knoepfe button[hidden] { display: none; }
.plus-knoepfe:has(button[hidden]) { grid-template-columns: 1fr; }
.knopf-plus-essen, .knopf-plus-training {
    min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.knopf-plus-essen { border: none; background: var(--akzent); color: var(--akzent-text); }
.knopf-plus-training { border: 1.5px solid var(--rand); background: transparent; color: var(--text); }
.knopf-plus-essen span[aria-hidden], .knopf-plus-training span[aria-hidden] { font-size: 22px; line-height: 1; }

/* "Heute gegessen": eigenes Scrollen im Kästchen, Seite bleibt kurz */
.mahlzeiten[hidden], .sport-tag[hidden] { display: none; }
.mahlzeiten .tagesliste .eintraege, .mahlzeiten .tagesliste > .liste { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.rezeptbuch-zeile { width: 100%; margin-top: 12px; }

/* Essen-Seite */
.kcal-zeile { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.kcal-mini {
    flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px;
    padding: 10px 14px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px;
}
.kcal-mini-text { font-size: 14px; color: var(--text-grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcal-mini-text b { color: var(--text); font-size: 16px; }
.kcal-mini-frei { font-size: 13px; font-weight: 600; color: var(--akzent); white-space: nowrap; }
.kcal-mini .kpi-spur { grid-column: 1 / -1; height: 6px; }
.kcal-mini .kpi-spur i { background: var(--akzent); }
.kcal-zeile .knopf-auge { min-height: 0; }
.bereich-foods .tag-oben { margin-bottom: 10px; }
.bereich-foods .tag-oben .tag-suche { flex: 1 1 100%; }
.bereich-foods .tag-oben .tag-suche > span[aria-hidden="true"] { display: inline; }
.essen-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.essen-chip {
    min-height: 44px; padding: 0 8px; border-radius: 14px; border: 1px solid var(--rand); background: var(--flaeche);
    color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.essen-chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.neu-zeile {
    width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 14px;
    padding: 10px 14px; border-radius: 16px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); cursor: pointer;
}
.neu-zeile .neu-plus { font-size: 24px; color: var(--akzent); width: 28px; text-align: center; }
.neu-zeile strong { color: var(--akzent); }
.bereich-foods .schnell-panel { margin-top: 0; }
#knopfAlleLm { display: block; margin: 12px auto 0; }
#knopfAlleLm[hidden], #listeTitel[hidden], .bereich-foods .suche[hidden], .bereich-foods .filter[hidden] { display: none; }

/* 👁 Fenster */
.anzeige-liste { display: grid; gap: 4px; margin-bottom: 10px; }
.anzeige-punkt {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px;
    border-radius: 14px; background: var(--flaeche); border: 1px solid var(--rand); font-size: 16px; cursor: pointer;
}
.anzeige-punkt input { width: 22px; height: 22px; accent-color: var(--akzent); margin: 0; }
.rezeptbuch-zeile { align-items: center; }
#lebensmittelListe[hidden], .schnell-panel[hidden], .tag-treffer[hidden] { display: none; }
@media (max-width: 359px) { .essen-chip .chip-emo { display: none; } .essen-chip { font-size: 13px; padding: 0 4px; } }

/* Sport-Fenster: Name-Feld beschriftet, eigene Übungs-Suche */
.feld-titel { display: block; font-size: 13px; color: var(--text-grau); margin: 0 0 4px 2px; }
.sport-suche { margin: 14px 0 8px; }
#sportSuchTreffer[hidden], #sportMeine[hidden] { display: none; }
#sportSuchTreffer .knopf-zweit { margin-top: 8px; }

/* Training-Seite (v4.2) – wie die Essen-Seite */
.bereich-training .suche { margin-bottom: 10px; }
.training-auswahl { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 14px; border-radius: 16px; }
.training-auswahl .schnell-zeile .sport-icon { font-size: 22px; }
.training-auswahl .schnell-dazu { display: flex; align-items: center; gap: 10px; text-align: left; }
.training-tag { margin-top: 4px; }
.training-tag .sport-eintrag { display: flex; align-items: center; gap: 6px; }
.training-tag .sport-eintrag .sport-zeile { flex: 1; min-width: 0; }
.paket-speichern { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.paket-speichern .eingabe-name { flex: 1 1 160px; min-width: 0; font-size: 16px; }
.paket-speichern .knopf-zweit { flex: 1 1 auto; }
.paket-speichern[hidden] { display: none; }
.training-tag .sport-eintrag { min-width: 0; }
.training-tag .sport-zeile .sport-info { min-width: 0; flex: 1; }
.training-tag .sport-zeile .sport-info strong, .training-tag .sport-zeile .sport-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-tag .eintrag-entfernen { flex: none; }
.training-tag { min-width: 0; overflow: hidden; }
#trainingAuswahl[hidden] { display: none; }

/* Löschen (v4.4) */
.knopf-loeschen { flex: none; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--rand); background: transparent; color: var(--text-grau); font-size: 13px; cursor: pointer; white-space: nowrap; }
.knopf-loeschen.sicher { background: var(--farbe-fehler); border-color: var(--farbe-fehler); color: #fff; font-weight: 700; }
.mahlzeit-kopf .knopf-loeschen { margin-left: auto; margin-right: 8px; }
.schnell-zeile .knopf-loeschen { min-width: 40px; }
.loeschen-liste { display: grid; gap: 10px; margin-top: 10px; }
.loeschen-liste .gefahr { border-color: var(--farbe-fehler); color: var(--farbe-fehler); }
.loeschen-liste .sicher { background: var(--farbe-fehler); border-color: var(--farbe-fehler); color: #fff; }
#essenKcalZeile[hidden] { display: none; }

/* ===== Version 4.6: Fenster am Handy immer über den ganzen (sichtbaren) Bildschirm =====
   Die Höhe folgt dem sichtbaren Bereich: geht die Tastatur auf, wird das Fenster kürzer
   statt hinter der Tastatur zu verschwinden. Wohnhaus-Bild: die Schiebetür passt sich dem Raum an. */
@media (max-width: 899px) {
    .fenster[open] {
        position: fixed; left: 0; right: 0; bottom: auto;
        top: var(--vv-oben, 0px);
        width: 100%; max-width: 100%;
        height: var(--sichtbar, 100dvh); max-height: var(--sichtbar, 100dvh);
        margin: 0; border: none; border-radius: 0;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
        overflow-y: auto; overscroll-behavior: contain;
    }
    #dialogSport[open] { min-height: 0; }
    /* Kopf mit ✕ bleibt beim Scrollen oben sichtbar */
    .fenster[open] .fenster-kopf { position: sticky; top: calc(-1 * max(16px, env(safe-area-inset-top))); z-index: 2; background: var(--flaeche); padding-top: 4px; padding-bottom: 8px; }
}

/* ===== Version 4.7: Daily Bites mit Überschrift (wie Entwurf v5) =====
   Logo oben, darunter „Daily Bites – Was andere essen. Neue Ideen für dich.“, dann die Kreise.
   So ist klar: das sind Inspirationen, nicht die Macher der App. */
@media (max-width: 899px) {
    body[data-tab="plan"] .kopf { flex-direction: column; align-items: stretch; gap: 14px; }
    .kopf .creators-titel, .kopf .creators-unter {
        position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    }
    .kopf .creators-titel { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); }
    .kopf .creators-unter { margin: 2px 0 8px; font-size: 14px; color: var(--text-grau); }
    .kopf .story-leiste { justify-content: flex-start; }
}

/* ===== Version 4.8: Speichern immer sichtbar (auch mit Tastatur), Hintergrund nicht durchscheinen ===== */
@media (max-width: 899px) {
    .fenster::backdrop { background: var(--hintergrund); }
    .fenster[open] .fenster-aktionen,
    .fenster[open] #uebungSpeichern,
    .fenster[open] form > .knopf-primaer.breit {
        position: sticky; bottom: 0; z-index: 3;
        box-shadow: 0 -14px 18px 6px var(--flaeche);
    }
    .fenster[open] .fenster-aktionen { background: var(--flaeche); padding: 8px 0 4px; margin-bottom: 0; }
}

/* ===== Version 4.9: Mengen-Fenster ===== */
.menge-lm { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--flaeche-hell); border: 1px solid var(--rand); margin-bottom: 16px; }
.menge-lm .lm-info { min-width: 0; }
.menge-eingabe { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; }
.menge-knopf { height: 60px; border-radius: 18px; border: 1px solid var(--rand); background: var(--flaeche-hell); color: var(--text); font-size: 30px; font-weight: 600; cursor: pointer; }
.menge-knopf:active { background: var(--akzent); color: var(--akzent-text); }
#mengeWert { height: 60px; width: 100%; min-width: 0; text-align: center; font-size: 30px; font-weight: 700; border-radius: 18px; border: 1px solid var(--akzent); background: var(--hintergrund); color: var(--text); }
.menge-einheit { display: flex; justify-content: center; margin: 12px auto 0; width: fit-content; }
.menge-einheit[hidden] { display: none; }
.menge-schnell { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 14px 0; }
.menge-chip { min-height: 42px; border-radius: 12px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.menge-chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.menge-vorschau { display: grid; gap: 4px; text-align: center; padding: 12px; border-radius: 16px; background: var(--flaeche-hell); margin-bottom: 14px; }
.menge-vorschau strong { font-size: 22px; }
.menge-vorschau span, .menge-vorschau small { color: var(--text-grau); font-size: 14px; }
@media (max-width: 359px) { .menge-chip { font-size: 12px; } .menge-eingabe { grid-template-columns: 54px 1fr 54px; } }

/* ===== Version 5.0: Tastatur-Hausordnung + Feinschliff ===== */
@media (max-width: 899px) {
    /* Tastatur offen → Leiste unten weg (schwebt sonst über der Tastatur und verdeckt Treffer) */
    body.tastatur .unten-nav { display: none; }
    body.tastatur { padding-bottom: 75vh; } /* Platz, damit das Suchfeld ganz nach oben geschoben werden kann */
    /* Mengen-Fenster: Eintragen klebt unten, bei wenig Platz kompakter */
    .fenster[open] #mengeEintragen { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -14px 18px 6px var(--flaeche); }
}
@media (max-width: 899px) and (max-height: 560px) {
    .menge-lm { padding: 8px; margin-bottom: 10px; }
    .menge-schnell { margin: 8px 0; }
    .menge-vorschau { padding: 8px; margin-bottom: 8px; }
    .menge-vorschau strong { font-size: 18px; }
    .menge-knopf, #mengeWert { height: 52px; }
    .fenster[open] { padding-bottom: 12px; }
}
#mengeEintragen:disabled { opacity: 0.45; }

/* 4 Kacheln nebeneinander: Zahlen passen immer (auch 1.850 kcal) */
.kpis[data-anzahl="4"] .kpi { padding: 8px 6px 7px; }
.kpis[data-anzahl="4"] .kpi strong { font-size: 15px; }
.kpis[data-anzahl="4"] .kpi-icon { font-size: 14px; margin-bottom: 2px; }
.kpis[data-anzahl="4"] .kpi small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.kpis[data-anzahl="4"] .kpi-zeile { gap: 3px; }
.kpis[data-anzahl="3"] .kpi strong { font-size: 18px; }

/* Meldungen oben statt unten – verdecken weder neue Einträge noch die Tastatur */
.meldung { bottom: auto; top: calc(10px + env(safe-area-inset-top)); width: max-content; max-width: calc(100% - 32px); text-align: center; transform: translate(-50%, -12px); }
.meldung.sichtbar { transform: translate(-50%, 0); }
.kpis[data-anzahl="4"] .kpi-zeile { flex-direction: column; align-items: flex-start; gap: 1px; }
.kpis[data-anzahl="4"] .kpi-einheit-text { display: none; }
/* Meldung oben: unteren Rand sicher aufheben (ältere Regel setzt bottom mit !important) */
.meldung { bottom: auto !important; height: auto; }
.neu-karte[hidden] { display: none; }

/* ===== Version 5.1: Übungen abhaken (To-do) + Scrollen ohne Hängen ===== */
.abhaken {
    flex: none; width: 34px; height: 34px; border-radius: 10px; border: 2px solid #2f8f62;
    background: transparent; color: #fff; font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
}
.abhaken.an { background: #2f8f62; }
.bereich-training .abhaken { border-color: var(--akzent); }
.bereich-training .abhaken.an { background: var(--akzent); color: var(--akzent-text); }
.sport-eintrag.erledigt .sport-zeile strong { text-decoration: line-through; opacity: 0.7; }
.sport-karte .sport-eintrag { margin-bottom: 6px; }
.sport-karte .sport-eintrag .sport-zeile { margin-bottom: 0; }
/* Keine Scroll-Fallen mehr: Listen laufen mit der Seite mit (iPhone blieb im inneren Kästchen hängen) */
.training-auswahl { max-height: none; overflow: visible; }
.mahlzeiten .tagesliste .eintraege, .mahlzeiten .tagesliste > .liste, .tag-treffer { overscroll-behavior: auto; }
.tag-treffer { max-height: none; overflow: visible; }
#trainingAuswahl, #tagTreffer, #auswahlListe.liste.kompakt { max-height: none; overflow: visible; } /* keine Scroll-Fallen im Kästchen – die Seite scrollt */
.sport-karte .eintrag-entfernen { flex: none; color: #0b3b26; }

/* ===== Version 5.2: Speichern oben in der Kopfzeile (wie iPhone-Apps), unten nichts mehr festgeklebt ===== */
.fenster-kopf { gap: 8px; }
.fenster-kopf h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-speichern {
    flex: none; min-height: 44px; padding: 0 14px; border-radius: 14px; border: none;
    background: var(--akzent); color: var(--akzent-text); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.kopf-speichern:disabled { opacity: 0.45; }
@media (max-width: 899px) {
    .fenster[open] .fenster-aktionen,
    .fenster[open] #uebungSpeichern,
    .fenster[open] #mengeEintragen,
    .fenster[open] form > .knopf-primaer.breit { position: static; box-shadow: none; }
}

/* ===== Version 5.3: Übungen sortieren (lange drücken, ziehen) ===== */
[data-sort-id] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.15s ease; }
[data-sort-id].wird-gezogen { transition: none; position: relative; z-index: 5; transform-origin: center; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); border-radius: 16px; }
[data-sort-id].wird-gezogen .sport-zeile { outline: 2px solid var(--akzent); }
.sortiert-gerade { touch-action: none; }

/* ===== Version 5.9: Mahlzeiten speichern ===== */
.bereich-foods .essen-chips { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bereich-foods .essen-chip { font-size: 13px; padding: 0 4px; }
@media (max-width: 389px) { .bereich-foods .essen-chip .chip-emo { display: none; } }
.mahlzeit-merken { margin-top: 12px; }
.mahlzeit-zeile .mahlzeit-inhalt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mahlzeit-zeile .schnell-dazu { min-width: 0; }
.mahlzeit-zeile .lm-info { min-width: 0; }
#mahlzeitFehler[hidden] { display: none; }
#dialogMahlzeit .eingabe-name { width: 100%; margin-bottom: 8px; font-size: 16px; }
@media (max-width: 439px) { .bereich-foods .essen-chip .chip-emo { display: none; } }
@media (max-width: 359px) { .bereich-foods .essen-chips { grid-template-columns: repeat(2, 1fr); } }

/* ===== Version 5.11: Mahlzeit-Zeile – Texte untereinander, nichts läuft in die Knöpfe ===== */
.mahlzeit-zeile .schnell-dazu { flex: 1 1 auto; overflow: hidden; }
.mahlzeit-zeile .lm-info { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow: hidden; }
.mahlzeit-zeile .lm-info > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mahlzeit-zeile .knopf-loeschen, .mahlzeit-zeile .schnell-plus-direkt { flex: none; }

/* ===== v5.12 – Rechtliches: Einwilligung, Konto löschen, Links unten im Profil ===== */
.konto-einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--text-grau); margin: 4px 0 2px; cursor: pointer; }
.konto-einwilligung input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); }
.konto-link { display: inline-block; font-size: 13px; margin: 0 0 6px; color: var(--akzent); padding: 6px 0; }
.hinweis-medizin { text-align: center; font-size: 12px; color: var(--text-grau); margin: 14px 16px 0; }
.rechtliches { display: flex; justify-content: center; gap: 10px; font-size: 13px; margin: 6px 0 0; color: var(--text-grau); }
.rechtliches a { color: var(--text-grau); padding: 8px 4px; }