/* Offline-fähig: System-Fonts ohne externe Abhängigkeit */

  :root {
    --bg: #f7f4ef;
    --surface: #ffffff;
    --surface2: #f0ece4;
    --petrol: #2b7685;
    --petrol-pale: #D5EEF2;
    --darkblue: #1E3A5F;
    --accent: #d4622a;
    --orange: #E8954A;
    --orange-pale: #FDE8D3;
    --warn: #c0392b;
    --warn-bg: #fff0ee;
    --ok: #2a7d4f;
    --ok-bg: #eef7f2;
    --text: #1a1714;
    --muted: #6b6560;
    --border: #ddd8d0;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --radius: 12px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
  }

  /* HEADER */
  header {
    background: var(--darkblue);
    color: #fff;
    padding: 22px 24px 18px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  }
  header h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.7rem; margin-bottom: 3px; }
  header p { color: rgba(255,255,255,0.7); font-size: 0.82rem; font-weight: 300; }
  .header-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
  .header-btn {
    padding: 6px 14px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1); color: #fff; font-family: inherit;
    font-size: 0.8rem; cursor: pointer; transition: all 0.15s; white-space: nowrap;
  }
  .header-btn:hover { background: rgba(255,255,255,0.2); }
  .header-btn.active { background: var(--petrol); border-color: var(--petrol); }

  /* CONTROLS */
  .controls {
    max-width: 860px; margin: 18px auto 0; padding: 0 16px;
    display: flex; gap: 10px; flex-wrap: wrap;
  }
  .search-wrap { flex: 1; min-width: 200px; position: relative; }
  .search-wrap input {
    width: 100%; padding: 11px 16px 11px 42px;
    border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-family: inherit; font-size: 0.95rem;
    outline: none; transition: border 0.2s;
  }
  .search-wrap input:focus { border-color: var(--petrol); }
  .search-wrap .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }

  select {
    padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-family: inherit; font-size: 0.92rem;
    color: var(--text); cursor: pointer; outline: none;
  }
  select:focus { border-color: var(--petrol); }

  #shopBtn {
    padding: 11px 18px; background: var(--petrol); color: #fff; border: none;
    border-radius: var(--radius); font-family: inherit; font-size: 0.9rem;
    font-weight: 600; cursor: pointer; white-space: nowrap; position: relative; transition: background 0.2s;
  }
  #shopBtn:hover { background: var(--darkblue); }
  #shopBadge {
    position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff;
    border-radius: 50%; width: 20px; height: 20px; font-size: 0.72rem; font-weight: 700;
    display: none; align-items: center; justify-content: center;
  }

  /* INFO-BOXEN im Header */
  .info-bar {
    max-width: 860px; margin: 12px auto 0; padding: 0 16px;
    display: none; gap: 10px; flex-wrap: wrap;
  }
  .info-bar.visible { display: flex; }
  .info-card {
    background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border);
    padding: 14px 16px; flex: 1; min-width: 240px;
    box-shadow: var(--shadow);
  }
  .info-card h3 { font-size: 0.9rem; color: var(--darkblue); margin-bottom: 8px; font-weight: 600; }
  .info-card p, .info-card li { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-bottom: 4px; }
  .info-card ul { padding-left: 16px; }
  .info-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
  .info-card th { background: var(--darkblue); color: #fff; padding: 4px 8px; text-align: left; }
  .info-card td { padding: 3px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
  .info-card tr:nth-child(even) td { background: var(--bg); }
  .chem-badge { background: var(--orange-pale); color: var(--orange); font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--orange); }

  /* GRID */
  .grid { max-width: 860px; margin: 14px auto 40px; padding: 0 16px; display: grid; gap: 12px; }

  /* CARD */
  .card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow); border: 1.5px solid var(--border); overflow: hidden;
  }
  .card-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    cursor: pointer; user-select: none; transition: background 0.15s;
  }
  .card-header:hover { background: var(--surface2); }
  .fleck-emoji { font-size: 1.5rem; min-width: 34px; text-align: center; }
  .fleck-name { font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; flex: 1; }
  .fleck-gruppe {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); background: var(--surface2);
    padding: 3px 8px; border-radius: 20px;
  }
  .warn-badge {
    background: var(--warn-bg); color: var(--warn); font-size: 0.7rem;
    font-weight: 600; padding: 3px 8px; border-radius: 20px; border: 1px solid #f5c6c0;
  }
  .chem-badge-card {
    background: var(--orange-pale); color: var(--orange); font-size: 0.7rem;
    font-weight: 600; padding: 3px 8px; border-radius: 20px; border: 1px solid var(--orange);
  }
  .warten-badge {
    background: #FFF8E7; color: #996600; font-size: 0.7rem;
    font-weight: 600; padding: 3px 8px; border-radius: 20px; border: 1px solid #DDAA00;
  }
  .chevron { color: var(--muted); font-size: 1rem; transition: transform 0.25s; min-width: 18px; }
  .card.open .chevron { transform: rotate(180deg); }

  /* CARD BODY */
  .card-body { display: none; padding: 0 18px 16px; border-top: 1.5px solid var(--border); }
  .card.open .card-body { display: block; }

  /* SPEZIALHINWEISE */
  .chem-hinweis {
    background: var(--orange-pale); border: 1.5px solid var(--orange);
    border-left: 4px solid var(--orange); border-radius: 8px;
    padding: 10px 13px; margin: 12px 0 8px; font-size: 0.83rem; color: #7a4000;
  }
  .chem-hinweis strong { color: var(--orange); display: block; margin-bottom: 3px; font-size: 0.8rem; }
  .warten-hinweis {
    background: #FFF8E7; border: 1.5px solid #DDAA00;
    border-left: 4px solid #DDAA00; border-radius: 8px;
    padding: 10px 13px; margin: 12px 0 8px; font-size: 0.83rem; color: #6b4c00;
  }
  .warten-hinweis strong { color: #996600; display: block; margin-bottom: 3px; font-size: 0.8rem; }
  .glycerin-hinweis {
    background: var(--petrol-pale); border-left: 3px solid var(--petrol);
    border-radius: 0 6px 6px 0; padding: 7px 10px; margin: 6px 0;
    font-size: 0.78rem; color: #1a4a56;
  }
  .enzym-hinweis {
    background: #f0f5f7; border-left: 3px solid #888;
    border-radius: 0 6px 6px 0; padding: 7px 10px; margin: 6px 0;
    font-size: 0.78rem; color: #444;
  }

  /* SURFACE */
  .section-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); margin: 13px 0 7px;
  }
  .surface-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
  .pill {
    padding: 6px 12px; border-radius: 20px; border: 1.5px solid var(--border);
    background: var(--surface2); font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
  }
  .pill:hover { border-color: var(--petrol); }
  .pill.active { background: var(--petrol); color: #fff; border-color: var(--petrol); }
  .pill-other input {
    border: none; background: transparent; font-family: inherit; font-size: 0.82rem;
    outline: none; width: 130px; color: var(--text);
  }

  /* ALTER-SCHALTER */
  .alter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .alter-pill {
    padding: 7px 13px; border-radius: 20px; border: 2px solid var(--border);
    background: var(--surface2); font-size: 0.83rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s;
  }
  .alter-pill.frisch.active  { background: #eef7f2; border-color: #2a7d4f; color: #2a7d4f; font-weight: 600; }
  .alter-pill.mittel.active  { background: #fffbee; border-color: #c8961a; color: #9a6f00; font-weight: 600; }
  .alter-pill.alt.active     { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); font-weight: 600; }

  .alter-hinweis {
    font-size: 0.82rem; color: var(--muted); font-style: italic; margin-bottom: 12px;
    padding: 8px 12px; background: var(--surface2); border-left: 3px solid var(--border);
    border-radius: 0 8px 8px 0; display: none;
  }
  .alter-hinweis.visible { display: block; }

  .methoden-block { display: none; }
  .methoden-block.visible { display: block; }

  /* METHODEN */
  .methoden-title {
    font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); margin-bottom: 8px;
  }
  .methoden-hint {
    font-size: 0.7rem; font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--petrol); display: block; margin-top: 2px; font-style: italic;
  }
  .oder-trenner {
    text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--accent);
    letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .oder-trenner::before, .oder-trenner::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: 0.3; }

  .methode {
    background: var(--surface2); border-radius: 10px; padding: 12px 14px;
    margin-bottom: 9px; border: 1.5px solid transparent; transition: border 0.15s;
  }
  .methode:hover { border-color: var(--border); }
  .methode-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
  .methode-nr {
    background: var(--darkblue); color: #fff; border-radius: 50%;
    width: 22px; height: 22px; min-width: 22px; font-size: 0.7rem;
    font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px;
  }
  .methode-text { font-size: 0.91rem; flex: 1; }
  .methode-zeit { font-size: 0.76rem; color: var(--petrol); font-style: italic; margin-top: 5px; }

  /* ZUTATEN */
  .zutaten-label { font-size: 0.73rem; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
  .zutat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .zutat {
    display: flex; align-items: center; gap: 5px; padding: 4px 10px;
    border-radius: 20px; font-size: 0.79rem; cursor: pointer; border: 1.5px solid; transition: all 0.15s;
  }
  .zutat.habe { background: var(--ok-bg); color: var(--ok); border-color: #a8d5bb; }
  .zutat.fehlt { background: var(--warn-bg); color: var(--warn); border-color: #f5c6c0; }
  .zutat.unset { background: var(--surface2); color: var(--muted); border-color: var(--border); }
  .zutat .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

  /* WARNHINWEIS */
  .warn-box {
    background: var(--warn-bg); border: 1.5px solid #f5c6c0; border-radius: 10px;
    padding: 10px 13px; font-size: 0.83rem; color: var(--warn);
    margin-top: 10px; display: flex; gap: 8px; align-items: flex-start;
  }
  .warn-box .wi { font-size: 1rem; min-width: 18px; }

  /* PFLEGEETIKETT HINWEIS */
  .pflege-hinweis {
    background: #f0f5f7; border: 1px solid #AAAAAA; border-radius: 8px;
    padding: 9px 12px; font-size: 0.8rem; color: #444; margin-top: 8px;
  }
  .pflege-hinweis strong { color: var(--darkblue); }

  /* EINKAUFSLISTE PANEL */
  #shopPanel {
    display: none; position: fixed; top: 0; right: 0;
    width: min(380px, 100vw); height: 100vh; background: var(--surface);
    box-shadow: -4px 0 32px rgba(0,0,0,0.18); z-index: 200; flex-direction: column;
  }
  #shopPanel.open { display: flex; }
  .shop-head {
    background: var(--darkblue); color: #fff; padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .shop-head h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; }
  #shopClose { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; }
  .shop-vorrat {
    background: var(--surface2); border-bottom: 1px solid var(--border);
    padding: 12px 20px; font-size: 0.8rem; color: var(--muted);
  }
  .shop-vorrat strong { color: var(--darkblue); display: block; margin-bottom: 4px; font-size: 0.82rem; }
  .shop-vorrat-items { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .vorrat-item {
    font-size: 0.75rem; padding: 3px 9px; border-radius: 12px;
    background: var(--petrol-pale); color: var(--petrol); border: 1px solid var(--petrol);
  }
  .shop-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
  .shop-empty { color: var(--muted); text-align: center; margin-top: 30px; font-size: 0.9rem; }
  .shop-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--border); font-size: 0.9rem;
  }
  .shop-item input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--petrol); cursor: pointer; }
  .shop-item label { flex: 1; cursor: pointer; }
  .shop-item label.done { text-decoration: line-through; color: var(--muted); }
  .shop-footer { padding: 14px 20px; border-top: 1.5px solid var(--border); }
  #shopClearBtn {
    width: 100%; padding: 10px; background: var(--surface2); border: 1.5px solid var(--border);
    border-radius: var(--radius); font-family: inherit; font-size: 0.86rem; color: var(--muted); cursor: pointer;
  }
  #shopClearBtn:hover { background: var(--warn-bg); color: var(--warn); }

  /* OVERLAY */
  #overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 150; }
  #overlay.open { display: block; }

  .result-count { max-width: 860px; margin: 8px auto 0; padding: 0 16px; font-size: 0.8rem; color: var(--muted); }

  /* INLINE STRIP */
  #shopStrip { display: none; max-width: 860px; margin: 10px auto 0; padding: 0 16px; }

  @media (max-width: 600px) {
    header h1 { font-size: 1.3rem; }
    .fleck-name { font-size: 1rem; }
    .alter-pill { font-size: 0.78rem; padding: 6px 10px; }
  }


/* ===== Ergänzungen v1.0 ===== */
:focus-visible { outline: 3px solid #1E3A5F; outline-offset: 2px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
button { font-family: inherit; }
.card-title { font-size: inherit; font-weight: inherit; margin: 0; }
button.card-header {
  width: 100%; background: none; border: 0; text-align: left; color: inherit; font: inherit;
  min-height: 56px;
}
.header-btn, .alter-pill, .zutat, .shop-item input { min-height: 36px; }
.zutat { background: none; font-family: inherit; }
.alter-pill { background: var(--surface2); font-family: inherit; color: var(--text); }
.chem-badge-card { white-space: nowrap; }
.behelf-badge {
  display: inline-block; margin-left: 8px; background: #FFF8E7; color: #7a5800;
  border: 1px solid #DDAA00; border-radius: 20px; padding: 1px 9px; font-size: 0.7rem; font-weight: 600;
  vertical-align: middle; cursor: help;
}
.betrifft { margin: 12px 0 4px; font-size: 0.8rem; color: var(--muted); }
.betrifft span { display:inline-block; background: var(--surface2); border:1px solid var(--border); border-radius: 12px; padding: 1px 9px; margin: 2px 4px 2px 0; color: var(--text); }
.warn-box strong { font-weight: 700; }
.safety-box {
  background: #fff7f0; border: 1.5px solid #f0c9a8; border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 10px 13px; margin: 10px 0; font-size: 0.83rem; color: #5b2e12;
}
.safety-box strong.sb-title { display:block; color: var(--accent); margin-bottom: 4px; font-size: 0.8rem; }
.safety-box ul { padding-left: 18px; }
.safety-box li { margin: 2px 0; }
.protein-box { background: #eef4fb; border: 1.5px solid #b9cde6; border-left: 4px solid var(--darkblue); border-radius: 8px; padding: 10px 13px; margin: 10px 0; font-size: 0.83rem; color: #1E3A5F; }
.hinweis-banner { max-width: 860px; margin: 14px auto 0; padding: 0 16px; }
.hinweis-banner > div { background:#FFF8E7; border:1px solid #DDAA00; border-left:4px solid #DDAA00; border-radius:10px; padding:10px 15px; font-size:0.8rem; color:#6b4c00; display:flex; gap:10px; align-items:flex-start; }
.hinweis-banner a { color:#6b4c00; font-weight:600; }
.info-card a { color: var(--petrol); }
.info-card h3 { font-size: 0.95rem; }
.info-card .src li { font-size: 0.8rem; }
main#main { display:block; }
.shop-actions { display:flex; gap:8px; margin-bottom:8px; }
.shop-actions button { flex:1; padding:9px; background: var(--petrol); color:#fff; border:0; border-radius: var(--radius); font-size:0.84rem; cursor:pointer; }
.shop-actions button.sec { background: var(--surface2); color: var(--text); border:1.5px solid var(--border); }
.vorrat-item.vi-opt { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.legal { max-width: 860px; margin: 28px auto 0; padding: 0 16px; font-size: 0.9rem; }
.legal h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; margin: 0 0 10px; color: var(--darkblue); }
.legal p { margin: 0 0 10px; }
.legal a { color: var(--petrol); }
.legal .small, .small { font-size: 0.8rem; color: var(--muted); }
footer.site-footer { max-width: 860px; margin: 32px auto 28px; padding: 14px 16px 0; border-top: 1.5px solid var(--border); font-size: 0.8rem; color: var(--muted); text-align: center; }
footer.site-footer a { color: var(--petrol); }
#shopStrip.visible { display: block; }
.noscript-msg { max-width: 860px; margin: 20px auto; padding: 14px 16px; background: var(--warn-bg); border: 1px solid #f5c6c0; border-radius: 10px; }
.grid-empty { text-align:center; color: var(--muted); padding: 30px 10px; }
@media print { header, .controls, .hinweis-banner, #shopStrip, #overlay, .header-btns { display:none !important; } }