*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --green:#1D9E75; --green-light:#E1F5EE; --green-dark:#0F6E56;
      --bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F4F4F1;
      --border:rgba(0,0,0,0.08); --border-mid:rgba(0,0,0,0.14);
      --text-1:#1A1A18; --text-2:#6B6B65; --text-3:#A5A59E;
      --font:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',monospace;
      --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
    }
    html { font-size:16px; -webkit-font-smoothing:antialiased; }
    body { font-family:var(--font); background:var(--bg); color:var(--text-1); min-height:100vh; }
    button { font-family:var(--font); cursor:pointer; border:none; background:none; }
    input { font-family:var(--font); }

    nav {
      position:sticky; top:0; z-index:50;
      background:rgba(250,250,248,0.93); backdrop-filter:blur(8px);
      border-bottom:1px solid var(--border);
    }
    .nav-inner {
      max-width:680px; margin:0 auto; padding:0 1.5rem;
      display:flex; align-items:center; justify-content:space-between; height:56px;
    }
    .logo { font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--text-1); text-decoration:none; }
    .logo span { color:var(--green); }
    .nav-back {
      font-size:13px; color:var(--text-2); text-decoration:none;
      display:flex; align-items:center; gap:6px;
      padding:6px 12px; border-radius:var(--r-md);
      border:1px solid var(--border-mid); transition:background 0.15s;
    }
    .nav-back:hover { background:var(--surface-2); }

    .page-wrap {
      max-width:680px; margin:0 auto; padding:2.5rem 1.5rem 4rem;
    }

    /* ── HAST DU EIN REZEPT? ── */
    .hr-question-box {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); padding:1.25rem 1.5rem;
      margin-bottom:1.25rem;
    }
    .hr-question { font-size:15px; font-weight:500; color:var(--text-1); margin-bottom:1rem; }
    .hr-yn-wrap { display:flex; gap:8px; }
    .hr-yn-btn {
      flex:1; padding:11px; border-radius:var(--r-md);
      border:1px solid var(--border-mid); background:var(--surface);
      font-size:14px; font-family:var(--font); cursor:pointer;
      transition:all 0.15s;
    }
    .hr-yn-btn.hr-selected-no  { background:var(--surface-2); border-color:var(--text-2); color:var(--text-1); }
    .hr-yn-btn.hr-selected-yes { background:var(--green); border-color:var(--green); color:#fff; }

    #hr-nein-optionen { margin-bottom:1.25rem; }
    .hr-option-card {
      background:var(--surface); border:1px solid var(--border-mid);
      border-radius:var(--r-lg); padding:1rem 1.25rem;
      margin-bottom:10px; cursor:pointer; transition:border-color 0.15s;
      text-decoration:none; display:block; color:inherit;
    }
    .hr-option-card:hover { border-color:var(--green); }
    .hr-option-title { font-size:14px; font-weight:500; color:var(--text-1); margin-bottom:3px; }
    .hr-option-sub { font-size:13px; color:var(--text-2); }

    /* ── HEADER ── */
    .page-header { margin-bottom:2rem; }
    .page-tag {
      display:inline-flex; align-items:center; gap:6px;
      background:var(--green-light); color:var(--green-dark);
      font-size:12px; font-weight:500; border-radius:20px;
      padding:4px 12px; margin-bottom:1rem;
    }
    .page-header h1 {
      font-size:clamp(22px,3.5vw,30px); font-weight:500;
      letter-spacing:-0.5px; line-height:1.25; margin-bottom:0.5rem;
    }
    .page-header p {
      font-size:14px; color:var(--text-2); line-height:1.6;
    }

    /* ── INFOBOX ── */
    .info-box {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); padding:1.25rem 1.5rem;
      margin-bottom:1.75rem;
    }
    .info-box-title {
      font-size:13px; font-weight:500; color:var(--text-1);
      margin-bottom:0.75rem;
    }
    .info-row {
      display:flex; align-items:flex-start; gap:10px;
      padding:8px 0; border-bottom:1px solid var(--border);
      font-size:13px; color:var(--text-2); line-height:1.6;
    }
    .info-row:last-child { border-bottom:none; padding-bottom:0; }
    .info-row-bullet {
      flex-shrink:0; margin-top:1px; color:var(--text-3);
      font-size:14px; line-height:1.6;
    }

    /* ── BEISPIELBILD ── */
    .example-wrap {
      background:var(--surface-2); border:1px solid var(--border);
      border-radius:var(--r-md); padding:1rem;
      margin-bottom:1.75rem; text-align:center;
    }
    .example-label {
      font-size:11px; font-weight:500; color:var(--text-3);
      text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.75rem;
    }
    .example-recipe {
      display:inline-flex; gap:1rem; align-items:center; flex-wrap:wrap; justify-content:center;
    }
    .recipe-card {
      background:var(--surface); border:1px solid var(--border-mid);
      border-radius:var(--r-md); padding:0.75rem 1rem;
      font-size:12px; color:var(--text-2); line-height:1.8;
      min-width:200px; text-align:left; position:relative;
    }
    .recipe-card-title {
      font-size:11px; font-weight:500; color:var(--text-3);
      margin-bottom:4px; text-transform:uppercase; letter-spacing:0.4px;
    }
    .recipe-redact {
      display:inline-block; background:#1A1A18; color:transparent;
      border-radius:2px; user-select:none;
      font-size:12px; line-height:1;
    }
    .recipe-arrow { font-size:20px; color:var(--text-3); }
    .example-caption {
      font-size:12px; color:var(--text-3); margin-top:0.75rem; line-height:1.5;
    }

    /* ── UPLOAD AREA ── */
    .upload-section { margin-bottom:1.5rem; }
    .upload-label {
      font-size:13px; font-weight:500; color:var(--text-1); margin-bottom:0.5rem; display:block;
    }
    .upload-drop {
      border:2px dashed var(--border-mid); border-radius:var(--r-lg);
      padding:2rem 1.5rem; text-align:center; cursor:pointer;
      transition:all 0.15s; background:var(--surface);
      position:relative;
    }
    .upload-drop:hover, .upload-drop.drag-over {
      border-color:var(--green); background:var(--green-light);
    }
    .upload-drop input[type="file"] {
      position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
    }
    .upload-icon { font-size:28px; margin-bottom:0.75rem; color:var(--text-3); }
    .upload-drop-text { font-size:14px; font-weight:500; color:var(--text-1); margin-bottom:4px; }
    .upload-drop-sub { font-size:12px; color:var(--text-3); }

    .file-selected {
      display:none; align-items:center; gap:12px;
      padding:12px 14px; background:var(--green-light);
      border:1px solid var(--green); border-radius:var(--r-md); margin-top:10px;
    }
    .file-selected.show { display:flex; }
    .file-selected-name { font-size:13px; font-weight:500; color:var(--green-dark); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .file-selected-remove { font-size:12px; color:var(--green-dark); cursor:pointer; text-decoration:underline; flex-shrink:0; }

    .image-preview {
      display:none; margin-top:10px; border-radius:var(--r-md);
      overflow:hidden; border:1px solid var(--border);
      max-height:240px; text-align:center; background:var(--surface-2);
    }
    .image-preview.show { display:block; }
    .image-preview img { max-height:240px; max-width:100%; object-fit:contain; }

    /* ── CHECKBOX ── */
    .confirm-check {
      display:flex; align-items:flex-start; gap:10px;
      margin-bottom:1.5rem; cursor:pointer;
    }
    .confirm-check input[type="checkbox"] {
      margin-top:2px; accent-color:var(--green); width:16px; height:16px; flex-shrink:0; cursor:pointer;
    }
    .confirm-check span { font-size:13px; color:var(--text-2); line-height:1.6; }

    /* ── BUTTON ── */
    .btn-validate {
      width:100%; background:var(--green); color:#fff;
      border-radius:var(--r-md); padding:13px; font-size:15px; font-weight:500;
      border:none; cursor:pointer; transition:opacity 0.15s;
    }
    .btn-validate:hover { opacity:0.88; }
    .btn-validate:disabled { opacity:0.35; cursor:not-allowed; }

    /* ── LOADING ── */
    .loading-state { display:none; text-align:center; padding:2rem 0; }
    .loading-state.show { display:block; }
    .spinner {
      width:40px; height:40px; border:3px solid var(--green-light);
      border-top-color:var(--green); border-radius:50%;
      animation:spin 0.8s linear infinite; margin:0 auto 1rem;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .loading-text { font-size:14px; color:var(--text-2); }

    /* ── ERGEBNISSE ── */
    .result-state { display:none; }
    .result-state.show { display:block; }

    .result-error {
      background:#FEF2F2; border:1px solid #FECACA;
      border-radius:var(--r-lg); padding:1.25rem 1.5rem; margin-bottom:1.5rem;
    }
    .result-error-title { font-size:14px; font-weight:500; color:#B91C1C; margin-bottom:4px; }
    .result-error-text { font-size:13px; color:#991B1B; line-height:1.6; }
    .btn-retry {
      margin-top:1rem; font-size:13px; color:var(--green); background:none;
      border:1px solid var(--green); border-radius:var(--r-md);
      padding:7px 16px; cursor:pointer; font-family:var(--font);
    }

    .result-success {
      background:var(--green-light); border:1px solid var(--green);
      border-radius:var(--r-lg); padding:1.25rem 1.5rem; margin-bottom:1.5rem;
    }
    .result-success-title { font-size:14px; font-weight:500; color:var(--green-dark); margin-bottom:6px; }
    .result-ingredient {
      display:inline-block; background:var(--green); color:#fff;
      font-size:12px; font-weight:500; border-radius:20px; padding:2px 10px; margin-bottom:8px;
    }
    .result-success-text { font-size:13px; color:var(--green-dark); line-height:1.6; }

    .manual-search {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); padding:1.25rem 1.5rem; margin-bottom:1.5rem;
    }
    .manual-search-title { font-size:13px; font-weight:500; margin-bottom:8px; }
    .manual-search-input { display:flex; gap:8px; }
    .manual-search-input input {
      flex:1; padding:9px 12px; border:1px solid var(--border-mid);
      border-radius:var(--r-md); font-size:14px; outline:none; transition:border-color 0.15s;
    }
    .manual-search-input input:focus { border-color:var(--green); }
    .btn-search {
      background:var(--green); color:#fff; border:none;
      border-radius:var(--r-md); padding:9px 16px; font-size:13px;
      font-weight:500; cursor:pointer; font-family:var(--font);
    }

    /* Produkt-Kacheln */
    .products-result { margin-top:1.5rem; }
    .products-result-label {
      font-size:12px; font-weight:500; color:var(--text-3);
      text-transform:uppercase; letter-spacing:0.5px; margin-bottom:1rem;
    }
    .products-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;
    }
    .prod-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-lg); overflow:hidden;
      transition:box-shadow 0.2s, transform 0.15s;
      text-decoration:none; color:inherit; display:block;
    }
    .prod-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); transform:translateY(-2px); }
    .prod-img {
      height:120px; background:var(--surface-2);
      display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .prod-img img { max-height:100px; max-width:85%; object-fit:contain; }
    .prod-img-emoji { font-size:36px; }
    .prod-body { padding:10px; }
    .prod-rx-badge {
      display:inline-block; font-size:10px; background:#FEF3C7; color:#92400E;
      border-radius:4px; padding:2px 7px; margin-bottom:5px; font-weight:500;
    }
    .prod-name { font-size:13px; font-weight:500; line-height:1.35; margin-bottom:3px; }
    .prod-desc { font-size:11px; color:var(--text-3); margin-bottom:8px; }
    .prod-footer { display:flex; align-items:center; justify-content:space-between; }
    .prod-price { font-size:14px; font-weight:500; }
    .btn-add {
      background:var(--green-light); color:var(--green-dark);
      border-radius:var(--r-sm); padding:4px 10px; font-size:12px; font-weight:500;
      transition:background 0.15s; border:none; cursor:pointer;
    }
    .btn-add:hover { background:#c2ebdb; }
    .btn-add.added { background:var(--green); color:#fff; }

    .disclaimer {
      font-size:11px; color:var(--text-3); line-height:1.6;
      border-top:1px solid var(--border); padding-top:1rem; margin-top:1.5rem;
    }

    .btn-continue {
      display:none; width:100%; background:var(--green); color:#fff;
      border-radius:var(--r-md); padding:13px; font-size:15px; font-weight:500;
      border:none; cursor:pointer; transition:opacity 0.15s; margin-top:1.5rem;
    }
    .btn-continue.show { display:block; }
    .btn-continue:hover { opacity:0.88; }

    @media(max-width:600px) {
      .page-wrap { padding:1.5rem 1rem 3rem; }
      .products-grid { grid-template-columns:repeat(2,1fr); }
      .example-recipe { flex-direction:column; }
      .recipe-arrow { transform:rotate(90deg); }
    }