:root { --page-max: 780px; } /* ggf. anpassen */

.app { width: 100%; margin: 0; padding: 0; /* kein max-width hier! */ }

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px;
}

/* Verhindere "schleichende" Breitenkappen pro Sektion */
.container .filter-card,
.container .list,
.container .card,
.container .section-title { max-width: none; }

/* Optional: Box-Sizing konsistent */
*, *::before, *::after { box-sizing: border-box; }

/* ====== Design Tokens / Theme ====== */
:root{
  /* Neue Farbpalette */
  --bg: #F6F4EE;         /* Soft Sand */
  --surface: #ffffff;
  --surface-2: #EFECE5;   /* Abgeleitet von --bg */
  --text: #2B2B2B;         /* Dunkelgrau */
  --muted: #7D7D7D;        /* Hellgrau */

  --brand: #2E7358;        /* Meal Green */
  --danger: #D9534F;       /* Red warning */
  --ok: #4CAF50;           /* Green OK */

  --grad-1: #2E7358;        /* Meal Green */
  --grad-2: #A2D8B8;        /* Lens Mint */

  --radius-xl:20px;
  --radius:14px;
  --shadow:0 4px 18px rgba(16,20,24,.08);

  --nav-safe:env(safe-area-inset-bottom,0px);

  /* Aliase */
  --primary: var(--brand);
  --card-bg: var(--surface);
  --app-bg: var(--bg);
  --text-muted: var(--muted);
  --border-subtle: rgba(16,20,24,.06);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg: #1a1d1c;
    --surface: #242827;
    --surface-2: #2a2e2d;
    --text:#ecf2ef;
    --muted:#9a9e9c;
    --shadow:0 10px 24px rgba(0,0,0,.35);
    --border-subtle: rgba(255,255,255,.12);
  }
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
}
img{max-width:100%;height:auto;display:block}

/* ====== Layout / App Frame ====== */
.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
header{position:sticky;top:0;z-index:10;background:var(--bg)}
.bar{max-width:var(--page-max);margin:0 auto;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.2px}
main{
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1rem;
  padding-bottom: calc(76px + var(--nav-safe) + 12px);
  box-sizing: border-box;
}


/* ====== Cards, Lists, Typography ====== */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border-subtle);
  padding:12px; /* kompakter als vorher */
}
.section-title{margin:1rem 0 .6rem;font-size:1.05rem;font-weight:700}
.meta,.time{font-size:.9rem;color:var(--muted)}

/* ====== Meal Cards (Index & History) ====== */
.list{display:grid;gap:.6rem} /* dichter */

.item{
  background:var(--surface);
  border-radius:12px;            /* etwas weniger rund */
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:48px 1fr 16px; /* kompakteres Grid */
  gap:.5rem;
  padding:.35rem .6rem;          /* weniger Innenabstand */
  align-items:center;
  border:1px solid var(--border-subtle);
}
.thumb{
  width:48px;height:48px;
  border-radius:10px;
  object-fit:cover;
  
}
.item .title{font-weight:700;margin:0;font-size:.94rem}
.item .time{font-size:.8rem;color:var(--muted);margin:.1rem 0 .25rem}
.item .desc{color:var(--muted);margin:.2rem 0 .35rem;line-height:1.3}
.item .actions{margin-top:.2rem}
.item .actions .btn{display:inline-block;position:relative;z-index:2}

@media (min-width:700px){
  .item{grid-template-columns:60px 1fr auto}
  .thumb{width:60px;height:60px}
}

/* Rechte Spalte (Chips) */
.chips{
  justify-self:end;
  align-self:center;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  max-width:32vw;
  pointer-events:none;
}
.chip{pointer-events:auto}
.chip{
  padding:.26rem .5rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
  background:var(--surface-2);
  border:1px solid var(--border-subtle);
  color:var(--text);
}
.chip.ok{
  background:color-mix(in srgb, var(--ok) 18%, #fff);
  border-color:color-mix(in srgb, var(--ok) 40%, #fff);
  color:#0f1115;
}
.chip.sym{
  background:color-mix(in srgb, #f59e0b 18%, #fff);
  border-color:color-mix(in srgb, #f59e0b 40%, #fff);
  color:#0f1115;
}
@media (min-width:700px){
  .chips{max-width:260px}
}

/* ====== Navigation bottom ====== */
.nav{
  position:fixed;
  left:0;right:0;bottom:0;
  padding-bottom:var(--nav-safe);
  background:var(--surface);
  border-top:1px solid var(--border-subtle);
  box-shadow:0 -6px 18px rgba(16,20,24,.06);
}
.tabs{
  max-width:var(--page-max);
  margin:0 auto;
  padding:.4rem .8rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.4rem;
}
.tab{
  appearance:none;background:transparent;border:0;
  padding:.5rem .25rem .6rem;
  display:grid;place-items:center;gap:.2rem;
  text-decoration:none;color:inherit;font-size:.78rem;
}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--brand);font-weight:700}

/* ====== Hero Upload ====== */
.hero{
  background:var(--brand);
  border-radius:var(--radius-xl);
  padding:1.1rem;
  color:#fff;
  box-shadow:var(--shadow);
  display:grid;gap:.5rem;align-items:center;cursor:pointer;position:relative;
}
.hero input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;z-index:5}
.hero .h{display:flex;align-items:center;gap:.6rem;font-weight:700}
.hero .sub{opacity:.95;font-size:.95rem}

/* ====== Buttons ====== */
.btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border-subtle);
  background:var(--surface-2);
  font-weight:700;cursor:pointer;
}
.btn:hover{filter:brightness(.98)}
.btn.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
.btn-primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.savebar{position:sticky;bottom:0;left:0;right:0;background:linear-gradient(180deg, rgba(0,0,0,0), var(--bg));padding:12px}
.save{width:100%;padding:14px 16px;border:none;border-radius:14px;background:var(--brand);color:#fff;font-weight:800;font-size:1rem}

/* ====== Inputs ====== */
input[type=text], textarea{
  width:100%;background:#fff;border-radius:12px;padding:.8rem;border:1px solid var(--border-subtle);font-size:.95rem
}
textarea{min-height:90px;resize:vertical}

/* ====== Toggle Segments & Pills ====== */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.seg button{
  padding:12px;border-radius:12px;border:1px solid var(--border-subtle);
  background:var(--surface-2);font-weight:700;color:var(--muted);opacity:.9;transition:all .15s ease;
}
.seg button:hover{filter:brightness(0.97)}
.seg button.active{background:var(--brand);border-color:var(--brand);color:#fff;opacity:1}
.seg button:active{transform:scale(0.97)}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--border-subtle);background:var(--surface-2);border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:600}
.pill.active{background:color-mix(in srgb, var(--brand) 18%, #fff);border-color:color-mix(in srgb, var(--brand) 40%, #fff);color:#0f1115}

/* ====== Icon Buttons ====== */
.iconbtn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--border-subtle);overflow:hidden
}
.iconbtn svg{width:22px;height:22px;display:block}

/* ====== Progress & Toast ====== */
#progress{display:none;margin-top:12px;height:8px;background:#e6e8eb;border-radius:8px}
#bar{width:0%;height:8px;background:var(--brand);border-radius:8px}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;padding:.55rem .8rem;border-radius:8px;display:none;z-index:9999}

/* ====== Lightbox ====== */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:80;padding:18px}
.lb-card{background:var(--surface);border-radius:16px;max-width:640px;width:100%;box-shadow:0 12px 36px rgba(0,0,0,.35);overflow:hidden}
.lb-media{width:100%;display:block;max-height:56vh;object-fit:contain;background:#000}
.lb-body{padding:14px}

/* ====== Bottom Sheet ====== */
.sheet{position:fixed;left:0;right:0;bottom:0;transform:translateY(110%);background:var(--surface);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.3);transition:transform .25s ease;z-index:90}
.sheet.open{transform:translateY(0)}
.sheet .grip{width:48px;height:5px;border-radius:999px;background:#c9d1d9;margin:10px auto}
.sheet .title{font-weight:700;padding:0 16px}
.sheet .options{display:grid;gap:8px;padding:10px 16px}
.opt{display:flex;align-items:center;gap:10px;padding:.7rem .9rem;border-radius:12px;background:var(--surface-2);border:1px solid var(--border-subtle);cursor:pointer}
.opt input{accent-color:var(--brand)}
.sheet .row{display:flex;gap:10px;padding:12px 16px}
.sheet .row .btn{flex:1;border:0;border-radius:12px;padding:.75rem 1rem;font-weight:700}
.btn-cancel{background:#eceef1}
.btn-save{background:var(--grad-1);color:#fff}

/* ====== Feel-Buttons (Wohl / Unwohl) ====== */
.feelrow{display:flex;gap:6px;margin-top:6px}
.feel-btn{
  flex:1;border:0;border-radius:8px;
  padding:.22rem .55rem;
  font-weight:700;font-size:.85rem;
  cursor:pointer;
  transition:background-color .2s,color .2s,transform .15s,opacity .2s;
}
.feel-btn--well{background:color-mix(in srgb, var(--brand) 15%, #fff);color:color-mix(in srgb, var(--brand) 70%, #000)}
.feel-btn--bad{background:color-mix(in srgb, var(--danger) 15%, #fff);color:color-mix(in srgb, var(--danger) 70%, #000)}
.feel-btn.active{background:var(--brand);color:#fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.05);opacity:1}
.feel-btn--bad.active{background:var(--danger);color:#fff}
.feel-btn.inactive{background:var(--surface-2)!important;color:var(--muted)!important;opacity:.6;filter:none}
.feel-btn:hover:not(.active){filter:brightness(0.98)}
.feel-btn:active{transform:scale(0.97)}

@media (prefers-color-scheme:dark){
  .feel-btn--well{background:color-mix(in srgb, var(--brand) 25%, var(--surface-2));color:var(--ok)}
  .feel-btn--bad{background:color-mix(in srgb, var(--danger) 25%, var(--surface-2));color:var(--danger)}
  .feel-btn.inactive{background:var(--surface-2)!important;color:var(--muted)!important;opacity:.55}
}

/* ====== Filter Card / Suchbereich ====== */
.filter-title{font-weight:700;margin:1rem 0 .4rem}
.filter-card{
  display:grid;gap:.8rem;
  padding:1rem;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--border-subtle);margin-bottom:1rem;
}
.filter-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:520px){.filter-grid-2{grid-template-columns:1fr}}
.filter-card select,
.filter-card input[type=search]{
  width:100%;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--surface-2);
  padding:.45rem .8rem;
  font-size:.9rem;line-height:1.2;height:auto;
  color:var(--text);font-family:inherit;
}
.filter-card select:focus,
.filter-card input[type=search]:focus{
  outline:2px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset:2px;
}
.filter-card input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
.filter-card select{
  -webkit-appearance:none;appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%,
    100% 0;
  background-size:6px 6px,6px 6px,2.5rem 100%;
  background-repeat:no-repeat;
  padding-right:2.2rem;
}

/* === FORCE: kompakte Meal-Karten nur auf der Startseite === */
main .list article.item{
  display: grid !important;
  grid-template-columns: 44px 1fr 14px !important; /* kleineres Bild + Pfeilspalte */
  grid-auto-rows: min-content !important;
  align-items: start !important;
  gap: .45rem !important;
  padding: .28rem .50rem !important;              /* deutlich weniger Innenabstand */
  border-radius: 10px !important;
  box-shadow: none !important;                    /* flacher Look */
  border: 1px solid var(--border-subtle) !important;
  background: var(--surface-2) !important;
  min-height: 0 !important;
}

main .list article.item .thumb{
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

main .list article.item .title{
  margin: 0 !important;
  font-size: .90rem !important;
  line-height: 1.2 !important;
}

main .list article.item .time{
  margin: .05rem 0 .12rem !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  color: var(--muted) !important;
}

main .list article.item .feedback{
  margin-top: .1rem !important;
  font-size: .80rem !important;
}

main .list article.item .feelrow{
  margin-top: 4px !important;
  gap: 6px !important;
}

main .list article.item .feel-btn{
  padding: .15rem .50rem !important;
  font-size: .84rem !important;
  border-radius: 8px !important;
}

/* Optional: Pfeil rechts entfernen, spart Platz horizontal */
main .list article.item .chev{ display: none !important; }

/* Optional: Abstand zwischen Karten enger */
main .list{ gap: .45rem !important; }
	  
/* ====== Auth Gate (Login / Register) ====== */
body.gate{background:var(--app-bg)}
.gate .container{max-width:520px;margin:0 auto;padding:1.2rem}
.auth-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border-subtle);
  padding:1rem;
}
.auth-title{margin:.2rem 0 .6rem;font-weight:800;letter-spacing:.2px}
.auth-sub{color:var(--text-muted);margin:0 0 1rem;font-size:.95rem}

/* Tabs oben */
.auth-tabs{display:flex;gap:.5rem;margin:.2rem 0 1rem}
.auth-tab{
  appearance:none;border:1px solid var(--border-subtle);
  background:var(--surface-2);color:inherit;
  padding:.5rem .8rem;border-radius:999px;font-weight:700;cursor:pointer
}
.auth-tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* Formulare */
.auth-form{display:none}
.auth-form.active{display:block}

.form-row{margin:.7rem 0}
.form-row label{display:block;font-weight:700;margin:0 0 .25rem;font-size:.9rem}

/* Inputs erweitern (du hast text/textarea – wir ergänzen password/email/select) */
input[type=password],
input[type=email],
input[type=text],
select{
  width:100%;
  background:#fff;
  border-radius:12px;
  padding:.8rem;
  border:1px solid var(--border-subtle);
  font-size:.95rem;
  font-family:inherit;
}
input[type=password]:focus,
input[type=email]:focus,
input[type=text]:focus,
select:focus{
  outline:2px solid color-mix(in srgb, var(--brand) 60%, transparent);
  outline-offset:2px;
}

/* Actions */
.form-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.btn-link{background:transparent;border:0;color:var(--brand);font-weight:700;padding:.4rem .2rem;cursor:pointer}

/* Alerts */
.alert{border:1px solid var(--border-subtle);border-radius:10px;padding:.65rem .8rem;margin:.6rem 0}
.alert.error{background:color-mix(in srgb, var(--danger) 12%, #fff)}
.alert.success{background:color-mix(in srgb, var(--ok) 12%, #fff)}
.alert .strong{font-weight:800}

/* Kleinere Typo-Helpers */
.text-muted{color:var(--text-muted)}

/* Card/Glas-Look für Dark-UI */
.card.empty-state {
  position: relative;
  padding: 1.5rem;
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 10% -10%, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 60%) ,
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
  text-align: center;
  color: #d8dbe0;
}

/* Illustration */
.empty-illus {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: #d8dbe0; /* steuert SVG-Farbe */
  opacity: 0.9;
}

/* Titel & Text */
.empty-title {
  margin: 0.25rem 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.empty-text {
  margin: 0 0 0.75rem;
  line-height: 1.45;
  color: #c9cdd3;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .04s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.btn:active { transform: translateY(1px) scale(0.99); }

/* sanfter Verlauf passend zu deinem Header-CTA */
.btn-gradient {
  background: linear-gradient(90deg, #a06bff, #ff7e5f, #feb47b);
  background-size: 160% 100%;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.btn-gradient:hover { filter: brightness(1.03); }

.btn-ghost {
  background: transparent;
  color: #cfd3da;
  border-color: rgba(255,255,255,0.12);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

.empty-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .25rem 0 .25rem;
}

/* kleine Tipps/Chips */
.empty-tips {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.empty-tips li {
  display: inline-block;
  font-size: .9rem;
  color: #aeb4be;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: .5rem .75rem;
  border-radius: 999px;
}

/* responsive Feinschliff */
@media (min-width: 480px) {
  .card.empty-state { padding: 1.75rem; }
}

/* ===== Profile – Feldgrößen & Chips innerhalb der Karte halten ===== */
.list .item label > span {
  display: block;
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: .4rem;
}
.list .item .input,
.list .item textarea,
.list .item select {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
}

.grid-2, .grid-3 {
  display: grid;
  gap: 12px;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.list .item {
  overflow: hidden;
  padding: 12px;
}

.list .item .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px 0;
  max-width: 100%;
  box-sizing: border-box;
}

.list .item .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
  max-width: 100%;
}
.list .item .chip input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

.list .item textarea.input {
  min-height: 84px;
  resize: vertical;
}

/* ===== Premium Card ===== */
.premium-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.premium-copy {
  flex: 1 1 280px;
  line-height: 1.45;
  color: var(--text);
}

.premium-points {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.premium-points li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
}
.premium-points li::before {
  content: "✓";
  flex: 0 0 auto;
  font-weight: 600;
  opacity: .8;
}

.premium-cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-gradient {
  position: static;
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow, 0 8px 24px rgba(16,20,24,.12));
  background: linear-gradient(90deg, var(--grad-1,#7c3aed), var(--grad-2,#fb923c));
  color: #fff;
  border: 0;
  cursor: pointer;
}

.list .item.premium {
  padding: 16px;
  overflow: hidden;
}

/* Nur für die Profilseite (Breite angleichen) */
.profile-page .history-width{
  max-width: 780px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}
.profile-page .list .item{ display:block; }
.profile-page .grid-2, 
.profile-page .grid-3{ display:grid; gap:12px; }
.profile-page .grid-2{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.profile-page .grid-3{ grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.profile-page .chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; max-width:100%;
}

/* ====== Analysis Page (moved from inline styles) ====== */
.analysis-wrap{ max-width:780px; margin:0 auto; padding:16px; }
.analysis-card{ background:var(--surface); border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--border-subtle); padding:14px; }
.analysis-title{ font-size:1.05rem; font-weight:700; margin:0 0 .4rem; }
.analysis-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:.3rem 0; }
.analysis-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; background:var(--brand); color:#fff; font-weight:700; border:none; cursor:pointer; }
.analysis-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.analysis-hint{ font-size:.8rem; color:var(--muted); margin-top:6px; }
.chart-wrap{ width:100%; max-width:780px; margin: 0 auto var(--space-4, 20px); }
.analysis-canvas{ display:block; width:100%; height:auto; }

/* Markdown content inside analysis result */
#userText { white-space: normal; line-height: 1.45; }
#userText h1, #userText h2, #userText h3, #userText h4 { margin: .6rem 0 .3rem; line-height: 1.25; }
#userText p { margin: .35rem 0; }
#userText ul, #userText ol { margin: .25rem 0 .5rem 1.1rem; padding-left: 1.1rem; }
#userText li { margin: .15rem 0; }
#userText > *:first-child { margin-top: 0; }
#userText > *:last-child  { margin-bottom: 0; }
#userText .md-meta { font-size:.9rem; color:var(--muted); margin:0 0 .5rem; }

/* Profile page width normalization */
body.profile-page main{ max-width:680px; }

:root { --page-max: 780px; }

.container, .page-wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px;
}
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px;
}

/* ============================
   Breitere Eingabe-Layouts
   ============================ */

/* Alle Input-Container auf 100% Breite */
.input, select.input, textarea.input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Standard grid-2 → flexible Spalten (min 260px, sonst 1fr) */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

/* grid-3 für kleinere Felder */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Checkbox-Stacks in Formularen */
.stack label {
  display: block;
  margin-bottom: 6px;
}

/* --- Fix: Symptome-Sheet über dem Footer halten --- */
#sheet,
.sheet {
  z-index: 200 !important; /* > Footer */
}

/* === Symptom-Badges (gelb, mittig, leicht nach links gerückt, besser lesbar) === */
:root{
  --sym-yellow: #E9A83F;          /* Yellow notice */
  --sym-yellow-text: #111;        /* dunkler Text */
  --sym-left-nudge: -10px;         /* optischer Ausgleich nach links */
}

@media (prefers-color-scheme: dark){
  :root{
    --sym-yellow: #f0b860;        /* kräftigeres Gelb für dunklen Hintergrund */
    --sym-yellow-text: #fff7e0;   /* leicht warmweiß für Kontrast */
  }
}

/* === Symptom-Badges (gelb) === */
.chip.sym{
  background: var(--sym-yellow) !important;
  color: var(--sym-yellow-text) !important;
  border: 1px solid rgba(16,20,24,.18);
  box-shadow: 0 0 4px rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.08);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  padding: 0 !important;
  line-height: 1;
  text-align: center;
  font-size: 13px;
  box-sizing: border-box;
  vertical-align: middle;

  margin-left: -10px; /* leicht nach links verschoben */
}

/* === OK-Badge (grün) === */
.chip.ok{
  background: var(--ok) !important;       /* kräftiges Grün aus Variable */
  color: #fff !important;                 /* weiße Schrift */
  border: 1px solid rgba(16,20,24,.18);
  box-shadow: 0 0 4px rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.08);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  padding: 0 !important;
  line-height: 1;
  text-align: center;
  font-size: 13px;
  box-sizing: border-box;
  vertical-align: middle;

  margin-left: -10px; /* ebenfalls leicht nach links verschoben */
}

@media (max-width: 420px){
  .chip.sym,
  .chip.ok{
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 14px;
  }
}

@media (prefers-color-scheme: dark){
  .chip.sym{
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 0 6px rgba(255,255,255,.08);
    text-shadow: 0 0 4px rgba(255,255,255,0.4);
  }
  .chip.ok{
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 0 6px rgba(255,255,255,.08);
  }
}
.scanner-viewport{
  width: 100%;
  height: 60vh;           /* groß genug für zuverlässige Erkennung */
  background: var(--surface-2, #f1f2f4);
  border-radius: var(--radius, 14px);
  overflow: hidden;
  position: relative;
}