:root{
    
    color-scheme: dark;
    --bg:#1B201D; --flaeche:#242A26; --flaeche-hoch:#2D342F;
    --salbei:#9CC7A5; --salbei-dunkel:#6E9A78; --beige:#E9E1D2; --grau:#AEB5AF;
    --warn:#E2A15C; --stop:#D4756B;
    --linie:rgba(156,199,165,.14);
    --r:18px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  
  html,body{margin:0;padding:0;background:#1B201D;background:var(--bg);color:#fff}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
    font-size:16px;line-height:1.45;
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    -webkit-font-smoothing:antialiased;
  }
  body.ohne-nav{padding-bottom:32px}
  header{
    position:sticky;top:0;z-index:20;background:rgba(27,32,29,.94);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);
    padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
  }
  .marke{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .marke h1{margin:0;font-size:21px;font-weight:650;letter-spacing:-.4px}
  .marke p{margin:0;width:100%;font-size:13px;color:var(--grau)}
  
  main{padding:16px 16px 24px;max-width:640px;margin:0 auto;min-height:70vh;
    position:relative;z-index:1}
  h2{font-size:16px;font-weight:600;margin:26px 0 10px;letter-spacing:-.2px;color:#FFFFFF}
  h2:first-child{margin-top:4px}
  .hinweis{font-size:13px;color:var(--grau);margin:0 0 14px}

  .segment{display:flex;gap:6px;background:var(--flaeche);padding:4px;border-radius:14px;margin-bottom:16px}
  .segment button{
    flex:1;border:0;background:transparent;color:var(--grau);font-size:14px;font-weight:550;
    padding:9px 6px;border-radius:11px;font-family:inherit;cursor:pointer
  }
  .segment button[aria-pressed="true"]{background:var(--salbei);color:#0E1210}

  .karte{
    background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
    padding:16px;margin-bottom:12px
  }
  .karte.gedimmt{opacity:.55}
  .kopf h3{margin:0 0 3px;font-size:17px;font-weight:600;letter-spacing:-.2px;line-height:1.3}
  .quelle{font-size:13px;color:var(--grau);margin:0}
  .grund{margin:11px 0 0;font-size:14px;color:var(--beige)}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
  .chip{font-size:12px;color:var(--grau);background:var(--flaeche-hoch);border-radius:99px;padding:4px 10px}
  .chip.mag{color:var(--salbei);background:rgba(156,199,165,.12)}
  .chip.magnicht{color:var(--warn);background:rgba(226,161,92,.12)}
  .marker{display:inline-block;font-size:11px;padding:3px 8px;border-radius:99px;margin:0 6px 8px 0;font-weight:600}
  .marker.top{background:rgba(156,199,165,.16);color:var(--salbei)}
  .marker.neu{background:rgba(233,225,210,.12);color:var(--beige)}
  .marker.heute{background:rgba(226,161,92,.14);color:var(--warn)}
  .marker.demo{background:rgba(174,181,175,.12);color:var(--grau)}

  .aktionen{display:flex;gap:7px;margin-top:14px}
  .aktionen button{
    flex:1;border:1px solid var(--linie);background:var(--flaeche-hoch);color:#fff;
    font-size:19px;padding:11px 0;border-radius:13px;font-family:inherit;cursor:pointer
  }
  .aktionen button:active{background:var(--salbei);color:#0E1210}
  .sterne{display:flex;gap:7px;margin-top:9px}
  .sterne button{flex:1;font-size:15px;padding:9px 0;border-radius:11px;border:1px solid var(--linie);background:var(--flaeche-hoch);color:var(--beige);font-family:inherit}

  .lernbanner{
    background:linear-gradient(135deg,rgba(156,199,165,.18),rgba(156,199,165,.05));
    border:1px solid rgba(156,199,165,.3);border-radius:var(--r);padding:14px 16px;margin-bottom:14px
  }
  .lernbanner strong{display:block;font-size:14px;color:var(--salbei);margin-bottom:5px}
  .lernbanner p{margin:6px 0 0;font-size:13px;color:var(--grau)}

  .zeile{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:14px}
  .zeile:last-child{border-bottom:0}
  .zeile span{color:var(--beige)}
  .zeile b{font-weight:600;color:var(--grau);text-align:right;font-size:13px}
  .zeile b.gut{color:var(--salbei)} .zeile b.weniger{color:var(--warn)}

  
  .schalter{display:flex;flex-direction:column;gap:8px}
  .schalter button{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;text-align:left;min-height:54px;
    border:1px solid var(--linie);background:var(--flaeche-hoch);color:#fff;
    font-size:15px;padding:15px 17px;border-radius:13px;font-family:inherit;cursor:pointer
  }
  .schalter button:active{background:var(--flaeche)}
  
  .schalter button[aria-pressed="true"]{
    background:rgba(156,199,165,.14);border-color:var(--salbei);color:#fff
  }
  .schalter .text{flex:1 1 auto;min-width:0}
  .schalter .haken{flex:0 0 22px;text-align:center;font-size:15px;color:var(--salbei)}
  .knopf{
    width:100%;border:0;background:var(--salbei);color:#0E1210;font-weight:650;font-size:15px;
    padding:15px;border-radius:14px;font-family:inherit;margin-top:14px;cursor:pointer
  }
  
  .knopf:disabled{background:var(--flaeche-hoch);color:var(--grau);cursor:default}
  .knopf.leise{background:var(--flaeche-hoch);color:var(--beige);border:1px solid var(--linie)}

  
  .regler{
    background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
    padding:14px 16px 10px;margin-bottom:12px
  }
  .regler[data-beruehrt="0"]{border-style:dashed;border-color:rgba(174,181,175,.35)}
    
  .reglerkopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
  .reglername{margin-right:auto}
  .reglername{font-size:15px;font-weight:600;color:var(--beige)}
  .reglerwert{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:2px 5px;font-size:14px;
    font-weight:650;color:var(--salbei);text-align:right;margin-left:auto}
  .reglerwert .prozent{font-variant-numeric:tabular-nums;white-space:nowrap}
  .reglerwert .gesicht{font-size:16px}
  .regler[data-beruehrt="0"] .reglerwert{color:var(--grau);font-weight:500}
  .reglerzeile{display:flex;align-items:center;gap:10px}
  .reglerstufe{
    flex:0 0 44px;width:44px;height:44px;border-radius:13px;border:1px solid var(--linie);
    background:var(--flaeche-hoch);color:var(--beige);font-size:21px;font-family:inherit;
    line-height:1;cursor:pointer;display:grid;place-items:center
  }
  .reglerstufe:active{background:var(--salbei);color:#0E1210}
  
  input[type=range].schieber{
    flex:1 1 auto;min-width:0;height:44px;margin:0;background:transparent;
    -webkit-appearance:none;appearance:none;cursor:pointer;
    
    touch-action:pan-y
  }
  input[type=range].schieber:focus{outline:none}
  input[type=range].schieber:focus-visible{outline:2px solid var(--salbei);outline-offset:4px;border-radius:12px}
  .spur{height:10px;border-radius:6px;
    background:linear-gradient(to right,var(--salbei) 0 var(--f,50%),var(--flaeche-hoch) var(--f,50%) 100%)}
  input[type=range].schieber::-webkit-slider-runnable-track{
    height:10px;border-radius:6px;
    background:linear-gradient(to right,var(--salbei) 0 var(--f,50%),var(--flaeche-hoch) var(--f,50%) 100%)
  }
  input[type=range].schieber::-moz-range-track{
    height:10px;border-radius:6px;
    background:linear-gradient(to right,var(--salbei) 0 var(--f,50%),var(--flaeche-hoch) var(--f,50%) 100%)
  }
  input[type=range].schieber::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;
    background:var(--salbei);border:3px solid #0E1210;box-shadow:0 2px 6px rgba(0,0,0,.45);
    margin-top:-11px
  }
  input[type=range].schieber::-moz-range-thumb{
    width:32px;height:32px;border-radius:50%;background:var(--salbei);
    border:3px solid #0E1210;box-shadow:0 2px 6px rgba(0,0,0,.45)
  }
  
  .regler[data-beruehrt="0"] input[type=range].schieber::-webkit-slider-thumb{
    background:var(--grau);opacity:.55
  }
  .regler[data-beruehrt="0"] input[type=range].schieber::-moz-range-thumb{
    background:var(--grau);opacity:.55
  }
  .regler[data-beruehrt="0"] input[type=range].schieber::-webkit-slider-runnable-track{
    background:var(--flaeche-hoch)
  }
  .regler[data-beruehrt="0"] input[type=range].schieber::-moz-range-track{background:var(--flaeche-hoch)}
  .reglerskala{display:flex;justify-content:space-between;align-items:center;
    font-size:11px;color:var(--grau);margin:2px 0 0;letter-spacing:.2px}
  
  .reglerende{
    min-height:44px;min-width:56px;display:inline-flex;align-items:center;gap:4px;
    border:0;background:transparent;color:var(--grau);font-family:inherit;
    font-size:11px;letter-spacing:.2px;padding:0 8px;cursor:pointer;border-radius:10px
  }
  .reglerende:active{background:rgba(156,199,165,.16);color:var(--salbei)}
  .reglerende .gross{font-size:15px;line-height:1}
  .reglermitte{padding:0 6px}
  .reglerfuss{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .reglerfuss button{
    flex:1 1 auto;min-height:44px;padding:10px 12px;border-radius:12px;
    border:1px solid var(--linie);background:var(--flaeche-hoch);color:var(--beige);
    font-family:inherit;font-size:13px;font-weight:550;cursor:pointer;text-align:center
  }
  .reglerfuss .uebernehmen{border-color:rgba(156,199,165,.45);color:var(--salbei)}
  .reglerfuss .kenneIchNicht[aria-pressed="true"]{
    background:var(--salbei);color:#0E1210;border-color:var(--salbei);font-weight:650
  }
  
  .regler[data-unbekannt="1"]{border-style:solid;border-color:rgba(156,199,165,.45)}
  .regler[data-unbekannt="1"] .reglerzeile,
  .regler[data-unbekannt="1"] .reglerskala{opacity:.35}
  .regler[data-unbekannt="1"] .reglerwert{color:var(--salbei);font-weight:650}
  
  .reglerwert .gesicht.wechsel{animation:gesichtWechsel .22s ease-out}
  @keyframes gesichtWechsel{from{transform:scale(.8)}to{transform:scale(1)}}
  @media (prefers-reduced-motion: reduce){
    .reglerwert .gesicht.wechsel{animation:none}
    *{scroll-behavior:auto}
  }
  .obzurueck{
    display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;
    color:var(--salbei);font-family:inherit;font-size:14px;font-weight:550;
    padding:8px 0;margin:0 0 4px;cursor:pointer
  }

  
  .auswahl{
    border:1.5px solid var(--linie);border-radius:var(--r);background:var(--flaeche);
    margin-bottom:10px;overflow:hidden
  }
  .auswahlbalken{
    display:flex;align-items:center;gap:12px;width:100%;min-height:58px;
    padding:14px 16px;border:0;background:transparent;color:var(--beige);
    font-family:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer
  }
  .auswahlhaken{
    flex:0 0 24px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
    border:1.5px solid var(--grau);font-size:14px;color:transparent
  }
  .auswahlname{flex:1 1 auto;min-width:0}
  .auswahlwert{font-size:13px;font-weight:550;color:var(--grau);white-space:nowrap}
  
  .auswahl[data-gewaehlt="1"]{
    border-color:#79a98a;background:#355f46;
    box-shadow:0 2px 8px rgba(0,0,0,.16)
  }
  .auswahl[data-gewaehlt="1"] .auswahlbalken{color:#fff}
  .auswahl[data-gewaehlt="1"] .auswahlhaken{
    background:#b1d3a0;border-color:#b1d3a0;color:#14251a;box-shadow:none
  }
  .auswahl[data-gewaehlt="1"] .auswahlwert{color:#f5eddd}
  .auswahl[data-gewaehlt="1"] input[type=range].schieber::-webkit-slider-thumb{background:#d5e5cb;box-shadow:0 1px 3px rgba(0,0,0,.22)}
  .auswahl[data-gewaehlt="1"] input[type=range].schieber::-moz-range-thumb{background:#d5e5cb;box-shadow:0 1px 3px rgba(0,0,0,.22)}
  .auswahlkoerper{padding:0 16px 14px}
  .auswahl[data-unbekannt="1"]{border-color:rgba(156,199,165,.45);box-shadow:none;background:var(--flaeche)}
  .auswahl[data-unbekannt="1"] .auswahlwert{color:var(--salbei);font-weight:650}
  
  .auswahl[data-unbekannt="1"] .reglerkopf,
  .auswahl[data-unbekannt="1"] .reglerzeile{opacity:.35}
  .listenschluss{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
  .listenschluss button{
    flex:1 1 auto;min-height:48px;padding:12px;border-radius:13px;border:1px solid var(--linie);
    background:var(--flaeche-hoch);color:var(--beige);font-family:inherit;font-size:14px;
    font-weight:550;cursor:pointer
  }
  .listenschluss button[aria-pressed="true"]{background:var(--salbei);color:#0E1210;border-color:var(--salbei)}
  
  .gleichwertig{display:flex;flex-direction:column;gap:12px;margin-top:18px}
  .gleichwertig button{
    width:100%;min-height:58px;padding:16px;border-radius:14px;
    border:1.5px solid rgba(156,199,165,.35);background:var(--flaeche);
    color:var(--salbei);font-family:inherit;font-size:16px;font-weight:650;cursor:pointer
  }
  .gleichwertig button:active{background:var(--flaeche-hoch)}

  
  .hauptauswahl{display:flex;flex-direction:column;gap:12px;margin-top:2px}
  .hauptwahl{
    display:flex;align-items:center;gap:14px;width:100%;text-align:left;
    background:var(--flaeche);border:1.5px solid rgba(156,199,165,.28);border-radius:var(--r);
    padding:20px 18px;min-height:88px;color:#fff;font-family:inherit;cursor:pointer
  }
  .hauptwahl:active{background:var(--flaeche-hoch);border-color:var(--salbei)}
  
  .hauptwahl[disabled]{opacity:.45;cursor:default}
  
  .hauptwahl.gewaehlt{
    border-color:var(--salbei);background:var(--flaeche-hoch);box-shadow:none
  }
  .hwIcon{
    flex:0 0 54px;width:54px;height:54px;display:grid;place-items:center;font-size:29px;
    border-radius:16px;background:rgba(156,199,165,.15);border:1px solid rgba(156,199,165,.32)
  }
  .hwText{display:flex;flex-direction:column;gap:3px;min-width:0}
  .hwText b{font-size:17px;font-weight:650;color:var(--salbei);letter-spacing:-.2px}
  .hwText i{font-style:normal;font-size:13px;color:var(--grau);line-height:1.35}
  
  .zurueck{
    display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;
    color:var(--salbei);font-family:inherit;font-size:14px;font-weight:550;
    padding:6px 0;margin:0 0 12px;cursor:pointer
  }

  .kartenoeffner{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:0;font:inherit;cursor:pointer}
  .kartenoeffner h3{margin:0}.restaurantlink{background:none;border:0;padding:4px 0;color:#9CC7A5;text-decoration:underline;font:inherit;cursor:pointer}
  article[data-karte]{cursor:pointer}button:focus-visible,summary:focus-visible{outline:3px solid #9CC7A5;outline-offset:4px}
  #kandidatDetails{box-sizing:border-box;width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #41594b;border-radius:24px;padding:24px;color:#edf5ef;background:#101412;box-shadow:0 24px 90px #0009}
  #kandidatDetails::backdrop{background:#000b}#kandidatDetails .detailkopf{display:flex;justify-content:space-between;gap:12px;position:sticky;top:-24px;background:#101412;padding:12px 0;z-index:1}
  #kandidatDetails li{line-height:1.6;margin:10px 0}#kandidatDetails a{color:#9CC7A5;overflow-wrap:anywhere}body.details-offen{overflow:hidden}
  .rezeptdetails{margin:16px 0;line-height:1.6}.rezeptdetails summary{cursor:pointer;font-weight:700;color:#9CC7A5;padding:8px 0}.rezeptdetails li{margin-bottom:8px}.rezeptdetails a{color:#9CC7A5;overflow-wrap:anywhere}
  
  .startbild{
    position:fixed;inset:0;z-index:100;overflow:hidden;
    background:#101412;
    opacity:1;transition:opacity .5s ease
  }
  
  .startbild.weg{opacity:0;pointer-events:auto}
  
  #startbild{animation:foodlyStartWeg .4s linear 3.4s forwards!important}
  @keyframes foodlyStartWeg{to{opacity:0;visibility:hidden}}

  
  .startfoto{
    position:absolute;inset:0;
    background-color:#2A1B3D;
    background-repeat:no-repeat;background-position:center bottom;background-size:cover
  }
  
  .startfoto::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom, rgba(20,10,16,0) 52%, rgba(20,10,16,.45) 78%, rgba(18,9,14,.82) 100%)
  }

  .startmarke{position:absolute;top:3%;left:12px;right:12px;text-align:center;color:white;text-shadow:0 2px 10px #000b}
  .startmarke>div{font-size:clamp(24px,4vh,40px);line-height:1}
  .startmarke h1{font-family:Georgia,serif;font-size:clamp(38px,7vh,68px);line-height:1.05;font-weight:400;margin:4px 0 8px;color:white}
  .startmarke p{font-size:clamp(16px,2.5vh,22px);line-height:1.2;margin:0;color:white}
  .startfuss{
    position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));
    padding:0 22px;text-align:center
  }
  
  .startknopf{
    width:100%;max-width:420px;border:0;border-radius:999px;
    background:#FFFFFF;color:#17472C;
    font-family:inherit;font-size:19px;font-weight:700;letter-spacing:-.2px;
    padding:19px 24px;cursor:pointer;
    box-shadow:0 10px 34px rgba(0,0,0,.34);
    opacity:1;transform:none;
    transition:background .18s ease, transform .12s ease
  }
  .startbild .startknopf{opacity:0;visibility:hidden;pointer-events:none}
  .startbild.startbereit .startknopf{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .startknopf[disabled]{cursor:default}
  .startknopf:active{background:#F1F5F1}

  
  @keyframes startPloppEinmal{
    0%{transform:scale(1)} 42%{transform:scale(1.075)} 70%{transform:scale(.992)} 100%{transform:scale(1)}
  }
  
  @keyframes startPloppLeise{
    0%{transform:scale(1)}
    11%{transform:scale(1.04)}
    23%{transform:scale(.998)}
    32%{transform:scale(1)}
    100%{transform:scale(1)}
  }
  .startknopf.bereit{
    animation:startPloppEinmal .62s cubic-bezier(.34,1.3,.5,1) 1 both
  }
  
  .startknopf.pocht{
    animation:startPloppLeise 2.5s cubic-bezier(.34,1.2,.5,1) infinite both
  }
  .startknopf.still{animation:none}
  @media (prefers-reduced-motion:reduce){
    .startknopf{transition:opacity .4s linear}
    .startknopf.bereit,.startknopf.pocht{animation:none}
  }

  .startkonto{
    margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.88);
    text-shadow:0 1px 10px rgba(0,0,0,.65)
  }
  .startkonto button{
    background:none;border:0;padding:4px 2px;font:inherit;color:#FFFFFF;
    text-decoration:underline;text-underline-offset:3px;cursor:pointer
  }
  .startkonto button:active{color:#D9E8DD}
  .startnotiz{
    margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.82);
    text-shadow:0 1px 10px rgba(0,0,0,.7)
  }

  
  .kulisse{
    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    background:#1B201D;background:var(--bg)
  }
  
  .kulisse i{
    position:absolute;font-style:normal;line-height:1;
    filter:saturate(.7);user-select:none;will-change:auto
  }
  header{position:relative;z-index:20}

  
  .intro{text-align:center;padding:28px 6px 6px}
  .intro h2{font-size:26px;font-weight:650;letter-spacing:-.6px;margin:0 0 10px;color:#FFFFFF;-webkit-text-fill-color:#FFFFFF}
  .intro p{color:var(--grau);font-size:15px;margin:0 auto;max-width:34ch;line-height:1.5}
  .intro p.lead{color:var(--beige);font-size:17px;margin-bottom:14px}
  .intro p.bereit{color:var(--salbei);font-size:16px;margin-top:22px}
  
  .balken-aussen{height:10px;border-radius:99px;overflow:hidden;margin-bottom:24px;
    background:rgba(156,199,165,.13);border:1px solid rgba(156,199,165,.22)}
  .balken-innen{height:100%;border-radius:99px;transition:width .45s ease;
    background:linear-gradient(90deg,#6E9A78 0%,#9CC7A5 65%,#B6DCBE 100%)}
  @media (prefers-reduced-motion:reduce){.balken-innen{transition:none}}
  
  
  .frage{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.28;
    margin:14px 0 10px;color:#9CC7A5;color:var(--salbei);-webkit-text-fill-color:currentColor;
    overflow-wrap:break-word;hyphens:auto}
  .frageherkunft{font-size:14px;color:#AEB5AF;color:var(--grau);margin:0 0 24px;line-height:1.55}
  .stufen{display:flex;flex-direction:column;gap:8px}
  .stufen button{
    display:flex;align-items:center;gap:13px;
    width:100%;text-align:left;border:1px solid var(--linie);background:var(--flaeche);
    color:#fff;font-size:15px;padding:14px 17px;border-radius:14px;font-family:inherit;cursor:pointer
  }
  .stufen button:active{border-color:var(--salbei);background:var(--flaeche-hoch)}
  .stufen button.gut{border-left:3px solid var(--salbei-dunkel)}
  .stufen button.weniger{border-left:3px solid var(--warn)}
  
  .stufen button .smiley{flex:0 0 28px;font-size:23px;line-height:1;text-align:center;filter:saturate(.95)}
  .stufen button .text{flex:1 1 auto;min-width:0}

  
  .stufen button .haken{flex:0 0 22px;text-align:center;font-size:15px;color:var(--grau)}
  .stufen button[aria-pressed="true"]{
    border-color:var(--salbei);background:rgba(156,199,165,.13)
  }
  .stufen button[aria-pressed="true"] .haken{color:var(--salbei)}
  .mehrfachhinweis{font-size:13px;color:var(--salbei);margin:0 0 10px}
  .ueberspringen{
    width:100%;background:transparent;border:0;color:var(--grau);font-size:14px;
    font-family:inherit;padding:16px 0 4px;cursor:pointer
  }
  .feld{margin-bottom:14px}
  .feld label{display:block;font-size:14px;color:var(--beige);margin-bottom:7px}
  .feld input{
    width:100%;background:var(--flaeche);border:1px solid var(--linie);color:#fff;
    font-size:17px;font-family:inherit;padding:14px 16px;border-radius:13px
  }
  .feld input:focus{outline:2px solid var(--salbei-dunkel);outline-offset:1px}
  .fehler{color:var(--stop);font-size:13px;margin:8px 0 0}

  
  .vorratneu{display:grid;grid-template-columns:1fr 78px 92px;gap:7px}
  .vorratneu input,.vorratneu select,.vorrateingabe input,.vorrateingabe select{
    background:var(--flaeche-hoch);border:1px solid var(--linie);color:#fff;
    font-size:15px;font-family:inherit;padding:12px;border-radius:11px;min-width:0
  }
  .vorratneu input:focus,.vorratneu select:focus{outline:2px solid var(--salbei-dunkel);outline-offset:1px}
  
  .vorratzeile{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:8px;
    padding:12px 0;border-bottom:1px solid var(--linie)}
  .vorratzeile:last-child{border-bottom:0}
  .vorratzeile.bearbeiten{display:block}
  .vorratname{font-size:15px;min-width:0;overflow-wrap:anywhere}
  .vorratname .eigen{display:block;font-size:11px;color:var(--grau);margin-top:2px}
  .vorratmenge{font-size:14px;color:var(--beige);font-variant-numeric:tabular-nums}
  .vorrateingabe{display:grid;grid-template-columns:1fr 92px auto auto;gap:7px;margin-top:9px;align-items:center}
  
  .vorratmenge.unbewertet{color:var(--grau);font-style:italic;font-variant-numeric:normal}
  
  .pgruppe{
    margin:20px 0 7px;font-size:14px;font-weight:650;color:var(--salbei);
    letter-spacing:.2px;text-transform:none
  }
  .psuche{margin:4px 0 10px}

  
  .sitzung{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;
    padding:9px 12px;margin:0 0 12px;font-size:13px;color:var(--beige)
  }

  
  .meldung{
    background:rgba(156,199,165,.12);border:1px solid rgba(156,199,165,.4);
    border-radius:14px;padding:13px 14px;margin:0 0 14px
  }
  .meldung p{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--creme)}

  
  .wissen{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    
    padding:0 14px calc(76px + env(safe-area-inset-bottom));
    display:flex;justify-content:center;pointer-events:none
  }
  .wissenkarte{
    pointer-events:auto;width:100%;max-width:520px;max-height:76vh;overflow-y:auto;
    background:var(--flaeche);border:1px solid var(--linie);border-radius:18px;
    padding:14px 14px 16px;box-shadow:0 -8px 40px rgba(0,0,0,.45);
    animation:wissenRein .22s ease-out
  }
  @keyframes wissenRein{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){.wissenkarte{animation:none}}
  .wissenkopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .wissenmarke{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--salbei);font-weight:650}
  .wissenzu{
    border:0;background:transparent;color:var(--grau);font-size:18px;line-height:1;
    padding:8px 10px;margin:-8px -10px 0 0;cursor:pointer;font-family:inherit;min-height:40px
  }
  .frage.klein{font-size:21px;line-height:1.25;margin:2px 0 4px}
  .wfoption{
    display:flex;align-items:center;gap:10px;width:100%;margin-top:7px;min-height:52px;
    border:1px solid var(--linie);background:var(--flaeche-hoch);color:var(--creme);
    border-radius:12px;padding:10px 13px;font-family:inherit;font-size:15px;cursor:pointer;text-align:left
  }
  button.klein{
    border:1px solid var(--linie);background:var(--flaeche-hoch);color:var(--beige);
    font-size:13px;padding:9px 12px;border-radius:10px;font-family:inherit;cursor:pointer
  }
  button.klein.salbei{background:var(--salbei);color:#0E1210;border-color:var(--salbei);font-weight:600}
  button.klein.loeschen{color:var(--stop);padding:9px 13px;font-size:15px;line-height:1}
  .rueckfrage{margin-top:14px;border-top:1px solid var(--linie);padding-top:14px}
  .rueckfragetitel{font-size:14px;color:var(--beige);margin:0 0 10px}
  .vorschlaege{display:flex;flex-direction:column;gap:7px}
  button.vorschlag{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    text-align:left;border:1px solid var(--linie);background:var(--flaeche-hoch);color:#fff;
    font-size:15px;font-family:inherit;padding:13px 15px;border-radius:12px;cursor:pointer
  }
  button.vorschlag:active{border-color:var(--salbei);background:rgba(156,199,165,.12)}
  button.vorschlag i{font-style:normal;font-size:12px;color:var(--grau)}

  
  .schritt{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--linie)}
  .schritt:last-child{border-bottom:0}
  .schritt b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--flaeche-hoch);color:var(--salbei);display:grid;place-items:center;font-size:12px}
  .schritt h4{margin:0;font-size:14px;font-weight:600}
  .schritt p{margin:2px 0 0;font-size:13px;color:var(--grau)}
  .testzeile{display:flex;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--linie)}
  .testzeile:last-child{border-bottom:0}
  .testzeile i{font-style:normal;flex:0 0 18px}
  .ok{color:var(--salbei)} .fail{color:var(--stop)}
  .bilanz{font-size:15px;font-weight:600;margin:0 0 4px}

  nav{
    position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
    background:rgba(36,42,38,.97);backdrop-filter:blur(14px);border-top:1px solid var(--linie);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom))
  }
  nav.aus{display:none}
  nav button{
    flex:1;background:transparent;border:0;color:var(--grau);font-family:inherit;font-size:11px;
    display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;cursor:pointer
  }
  nav button span{font-size:19px;line-height:1}
  nav button[aria-pressed="true"]{color:var(--salbei)}
  .leer{color:var(--grau);font-size:14px;padding:18px 0;text-align:center}


:root{--bg:#0E1211;--flaeche:#151A18;--flaeche-hoch:#1D2421;
 --salbei:#9CC7A5;--salbei-dunkel:#7AAE88;--beige:#E9E1D2;
 --grau:#A7AFA9;--linie:rgba(233,225,210,.10);--r:22px}
html,body{background:#0E1211}
body{line-height:1.55}
main{max-width:520px;padding:18px 20px 28px}
header{background:rgba(14,18,17,.92);backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);padding:calc(18px + env(safe-area-inset-top)) 20px 14px}
.marke{max-width:480px;margin:auto}
.marke h1{font-size:26px;font-weight:600;color:var(--beige);letter-spacing:-.02em}
.marke p{color:var(--grau);font-size:13px}
h2{font-size:20px;color:var(--beige)}
.karte{border-radius:22px;background:var(--flaeche)}
.kopf h3{color:var(--beige)}
nav{background:rgba(14,18,17,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hauptauswahl{gap:14px}
.hauptwahl{border:1px solid rgba(233,225,210,.20);border-radius:22px;
 background:var(--flaeche);padding:16px;min-height:100px;transition:border-color .18s,background .18s,transform .12s}
.hauptwahl:active{transform:scale(.98);background:var(--flaeche-hoch)}
.hwIcon{width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:25px;
 background:var(--flaeche-hoch);border:1px solid var(--linie)}
.hwText b{color:var(--beige);font-size:16px;font-weight:600}
.hwText i{font-size:13px;color:var(--grau)}
.start-vorschau{padding:12px 16px;border-radius:14px;background:rgba(14,18,17,.9);
 color:#E9E1D2;font-size:14px;max-width:420px;margin:0 auto 14px}
:focus-visible{outline:2px solid var(--salbei);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.startknopf,.startbild{animation:none!important;transition:none!important}}




:root{--bg:#1b1c19;--flaeche:#252722;--flaeche-hoch:#30332c;--beige:#f5eddd;--grau:#b9bbae;--salbei:#b1d3a0;--linie:rgba(235,225,203,.14);--r:22px}
body{color:var(--beige)}
header,nav{background:rgba(27,28,25,.96)}
main{padding-top:24px}
h2,.kopf h3,.frage{color:var(--beige)}
.karte,.hauptwahl{padding:20px;margin-bottom:16px;border-color:var(--linie);box-shadow:0 8px 24px #0002}
.hauptwahl{min-height:108px}
.knopf{border-radius:16px;min-height:50px}
.auswahl{margin-bottom:14px}
.auswahlbalken{min-height:64px;padding:17px 18px}
.auswahlkoerper{padding:0 18px 18px}
.auswahl:not([data-gewaehlt="1"]){box-shadow:0 4px 16px #0001}
input:not([type=range]):not([type=checkbox]),select{border-radius:14px}
nav button[aria-pressed="true"]{background:rgba(177,211,160,.10);border-radius:14px}
/* Foodly 3.9 Startdesign: Navigation wie im Startbildschirm */
:root{--navD:min(104px,27vw)}
body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
nav{left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom));max-width:504px;margin:0 auto;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:rgba(20,23,22,.94);padding:6px 4px;overflow:visible;box-shadow:0 10px 30px rgba(0,0,0,.45);border-top:1px solid rgba(255,255,255,.08)}
nav button[hidden]{display:none}
nav button{font-size:11.5px;position:relative;min-width:0;padding:8px 0 10px}
nav button span svg{width:26px;height:26px;display:block}
nav button[aria-pressed="true"]{background:none;color:#8CD98A}
nav button[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#8CD98A}
nav button.navRad{flex:0 0 calc(var(--navD) + 6px);padding:0;overflow:visible}
@media (max-width:360px){nav button{font-size:10.5px}}
nav button.navRad[aria-pressed]::after{display:none}
.navRadKreis{position:absolute;bottom:22px;left:50%;margin-left:calc(var(--navD) * -.5);width:var(--navD);height:var(--navD);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-style:normal;color:#fff;border:1.5px solid rgba(214,150,255,.75);background:radial-gradient(circle at 50% 32%,#B04BF0 0%,#7A22C9 58%,#4C1287 100%);box-shadow:0 8px 22px rgba(120,40,200,.42),0 0 0 5px rgba(20,23,22,.94);text-align:center}
nav button.navRad:active .navRadKreis{transform:scale(.96)}
.navRadKreis svg{width:calc(var(--navD) * .32);height:calc(var(--navD) * .32);margin-bottom:2px}
.navRadKreis b{font-size:calc(var(--navD) * .13);font-weight:700;line-height:1.1}
.navRadKreis small{font-size:calc(var(--navD) * .092);line-height:1.15;color:rgba(255,255,255,.82);max-width:80%}
.startfoto::after{background:none}


.reglerzeile{gap:0}
.schiene{position:relative;flex:1 1 auto;min-width:0;height:52px;display:flex;align-items:center}
.schiene input[type=range].schieber{width:100%;height:52px}
input[type=range].schieber::-webkit-slider-thumb{
  width:38px!important;height:38px!important;margin-top:-14px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;opacity:1!important}
input[type=range].schieber::-moz-range-thumb{
  width:38px!important;height:38px!important;background:transparent!important;border:0!important;box-shadow:none!important;opacity:1!important}
.knopfgesicht{
  position:absolute;top:50%;left:calc(19px + (100% - 38px) * var(--p,.5));
  transform:translate(-50%,-50%);font-size:32px;line-height:1;pointer-events:none;
  filter:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

.regler[data-beruehrt="0"] .knopfgesicht,.auswahl[data-beruehrt="0"] .knopfgesicht{filter:none;opacity:.65}
.smileyende{
  flex:0 0 48px;width:48px;min-width:48px;height:48px;padding:0;justify-content:center;
  font-size:28px;line-height:1;border-radius:14px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.smileyende:active{background:rgba(156,199,165,.16)}
.reglerwert .gesicht{display:none}

.auswahl[data-gewaehlt="1"]{background:#2b3a30;border-color:#79a98a;box-shadow:none}
.auswahl[data-gewaehlt="1"] .auswahlwert{color:var(--beige)}
.auswahl,.auswahl:not([data-gewaehlt="1"]){box-shadow:none}

.auswahl:not([data-gewaehlt="1"]):not([data-unbekannt="1"]) .auswahlkoerper{display:none}
.auswahl:not([data-gewaehlt="1"]):not([data-unbekannt="1"]) .auswahlbalken{min-height:58px;padding:9px 14px}

.zutatbild{display:block;overflow:hidden;background:var(--flaeche-hoch);border:1px solid var(--linie)}
.zutatbild.klein{flex:0 0 40px;width:40px;height:40px;border-radius:10px}
.zutatbild.gross{width:100%;aspect-ratio:16/10;border-radius:14px;margin:0 0 12px}
.zutatbild img{display:block;width:100%;height:100%;object-fit:cover}
.zutatbild.platzhalter{display:grid;place-items:center;color:var(--grau);font-size:16px;font-weight:650}
.auswahl[data-foto="1"][data-gewaehlt="1"] .zutatbild.klein,.auswahl[data-foto="1"][data-unbekannt="1"] .zutatbild.klein{display:none}
.regler .zutatbild.gross{margin-top:2px}


.auswahl:not([data-gewaehlt="1"]):not([data-unbekannt="1"]) .auswahlkoerper{display:block}
.auswahl .reglerkopf{display:none}
.auswahl,.regler{margin-bottom:10px}
.auswahlbalken,.auswahl:not([data-gewaehlt="1"]):not([data-unbekannt="1"]) .auswahlbalken{min-height:52px;padding:10px 14px 2px}
.auswahlkoerper{padding:0 14px 10px}
.regler{padding:12px 14px 8px}
.reglerkopf{align-items:center;gap:10px;margin-bottom:2px}
.reglerkopf .zutatbild.klein{flex:0 0 40px}
.auswahlwert{font-size:13px}
.schiene{height:48px;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:pointer}
.schiene input[type=range].schieber{height:48px;pointer-events:none}
.reglerskala{display:flex;justify-content:space-between;margin:-4px 0 0}
.reglerskala .skalawert{min-height:40px;min-width:52px;padding:0 6px;font-size:12px;color:var(--grau);justify-content:center}
.reglerskala .skalawert:first-child{justify-content:flex-start}
.reglerskala .skalawert:last-child{justify-content:flex-end}
.reglerfuss{margin-top:4px}
.reglerfuss .kenneIchNicht{min-height:40px;padding:8px 12px;font-size:13px}
.frage,main h2{scroll-margin-top:96px}
.auswahl[data-beruehrt="0"] input[type=range].schieber::-webkit-slider-runnable-track{background:var(--flaeche-hoch)}
.auswahl[data-beruehrt="0"] input[type=range].schieber::-moz-range-track{background:var(--flaeche-hoch)}
.reglerfuss{justify-content:flex-end;margin-top:0}
.reglerfuss .kenneIchNicht{flex:0 0 auto;min-height:40px;padding:6px 12px;font-size:12.5px}
@media (max-width:360px){.smileyende{flex-basis:44px;width:44px;min-width:44px;height:44px;font-size:25px}.knopfgesicht{font-size:29px}}



.auswahl[data-foto="1"][data-gewaehlt="1"] .zutatbild.klein,.auswahl[data-foto="1"][data-unbekannt="1"] .zutatbild.klein{display:block}
.zutatbild.klein{flex:0 0 44px;width:44px;height:44px;border-radius:11px}
.zutatbild.platzhalter{color:var(--grau);display:block;padding:2px}

.reglerkopf,.auswahlbalken{flex-wrap:nowrap!important}
.reglername,.auswahlname{min-width:3.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reglerwert,.auswahlwert{flex:0 0 auto;white-space:nowrap;text-align:right;justify-content:flex-end;flex-wrap:nowrap!important}
.reglerwert .prozent + .wort{display:none}

.auswahl .auswahlbalken{min-height:60px!important;padding:8px 14px 2px!important}

.schiene{height:60px;margin:-4px 0}
.schiene input[type=range].schieber{height:60px}
.schiene.zieht{cursor:grabbing}
.knopfgesicht{font-size:32px}
input[type=range].schieber::-webkit-slider-runnable-track,input[type=range].schieber::-moz-range-track{height:8px}

.reglerfuss.dreier{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:2px}
.reglerfuss.dreier button{min-height:44px;padding:6px 4px;font-size:12.5px;line-height:1.2;border-radius:11px;flex:none}
.reglerfuss.dreier button[aria-pressed="true"]{background:var(--salbei);color:#0E1210;border-color:var(--salbei);font-weight:650}
@media (max-width:360px){.knopfgesicht{font-size:30px}.reglerfuss.dreier button{font-size:11.5px}.reglerwert,.auswahlwert{font-size:11.5px}.auswahlbalken{gap:8px}.auswahlhaken{flex-basis:22px;width:22px;height:22px}}


.schiene{height:64px;margin:-6px 0}
.schiene input[type=range].schieber{height:64px}
input[type=range].schieber::-webkit-slider-thumb{width:38px!important;height:38px!important;margin-top:-15px!important}
input[type=range].schieber::-moz-range-thumb{width:38px!important;height:38px!important}
.knopfgesicht{font-size:38px;width:38px;height:38px;display:grid;place-items:center;
  left:calc(19px + (100% - 38px) * var(--p,.5));will-change:left}
.schiene.zieht .knopfgesicht{transition:none}

.reglerfuss.dreier{grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.reglerfuss.dreier .uebernehmen.lang{grid-column:1 / -1;min-height:46px;font-size:14px;font-weight:650;
  background:var(--salbei);color:#0E1210;border:1px solid var(--salbei)}
.reglerfuss.dreier .uebernehmen.lang[aria-pressed="true"]{background:#7fb18a;border-color:#7fb18a}
.reglerfuss.dreier .kenneIchNicht{min-height:44px;font-size:13px}
.reglerfuss.dreier .kenneIchNicht[aria-pressed="true"]{background:rgba(156,199,165,.16);color:var(--salbei);border:1.5px solid var(--salbei)}
.reglerfuss.dreier .uebernehmen[aria-pressed="true"]::before{content:"✓ "}

@media (max-width:360px){.knopfgesicht{font-size:36px}.reglerfuss.dreier .kenneIchNicht{font-size:12px}}


.k2{display:grid!important;grid-template-columns:38% minmax(0,1fr);gap:12px;align-items:stretch;
  padding:10px!important;border:1.5px solid rgba(156,199,165,.30)!important;border-radius:20px!important;
  background:#232823!important;box-shadow:none!important;overflow:hidden;margin-bottom:12px}
.k2[data-gewaehlt="1"]{border-color:#8fbf9b!important;background:#263028!important}
.k2[data-unbekannt="1"]{border-color:rgba(156,199,165,.5)!important}
.k2bild{position:relative;border-radius:14px;overflow:hidden;background:#2d332e;min-height:100%}
.k2bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.k2bild.platzhalter{display:grid;place-items:center;color:var(--grau)}
.k2bild.platzhalter svg{width:46%;height:auto}
.k2rechts{min-width:0;display:flex;flex-direction:column}
.k2 .auswahlbalken{display:flex!important;align-items:flex-start!important;justify-content:space-between;gap:8px!important;
  min-height:0!important;padding:2px 0 0!important;background:none;border:0;width:100%;text-align:left}
.k2 .auswahlname,.k2 .reglername{font-size:19px!important;font-weight:650;color:#F5EDDD;line-height:1.2;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-width:0}
.k2 .auswahlhaken{flex:0 0 26px!important;width:26px!important;height:26px!important;border-radius:8px}
.k2 .reglerkopf{display:block!important;margin:2px 0 0}
.k2wert{display:block!important;min-width:0!important;text-align:left!important;font-size:14px!important;
  font-weight:600;color:var(--salbei)!important;margin:2px 0 0;min-height:20px;white-space:nowrap}
.k2wert .prozent{font-size:15px}
.k2[data-beruehrt="0"]:not([data-unbekannt="1"]) .k2wert{color:var(--grau)!important;font-weight:500}
.k2 .auswahlkoerper{padding:0!important;display:block!important}
.k2 .auswahlkoerper .reglerkopf{display:none!important}
.k2 .reglerzeile{margin:2px 0 0}
.k2 .reglerskala{margin:-6px 0 2px}
.k2 .reglerskala .skalawert{min-width:40px;font-size:11.5px}
.k2 .reglerfuss.dreier{margin-top:4px;gap:6px}
.k2 .reglerfuss.dreier .uebernehmen.lang{min-height:44px;font-size:14px}
.k2 .reglerfuss.dreier .kenneIchNicht{min-height:46px;font-size:12px;padding:4px 3px}

.regler.k2{border-style:solid!important}
@media (max-width:360px){
  .k2{grid-template-columns:36% minmax(0,1fr);gap:9px;padding:8px!important}
  .k2 .auswahlname,.k2 .reglername{font-size:17px!important}
  .k2 .reglerfuss.dreier .kenneIchNicht{font-size:11px}
}

.k2bild{background:#242e26!important}.k2bild img{object-fit:contain!important;object-position:center!important}


.k2,.regler.k2{display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;overflow:hidden!important;border-radius:22px!important}
.k2bild{display:block!important;position:relative!important;width:100%!important;min-height:0!important;height:auto!important;aspect-ratio:16/9!important;border-radius:0!important;flex:none!important;background:#242e26!important;overflow:hidden!important}
.k2bild img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.k2bild.platzhalter{display:grid!important;place-items:center!important}
.k2rechts{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;padding:14px 16px 16px!important}
.k2 .auswahlbalken{padding:0!important;min-height:40px!important;align-items:center!important}
.k2 .auswahlname,.k2 .reglername{font-size:21px!important}
.k2 .reglerkopf{margin:0 0 4px!important}
.k2wert{margin:2px 0 8px!important;min-height:22px!important}
.k2 .reglerzeile{margin:4px 0 2px!important}
.k2 .reglerskala{margin:0 0 8px!important}
.k2 .reglerfuss.dreier{gap:8px!important;margin-top:8px!important}
.k2 .reglerfuss.dreier button{min-height:48px!important}
@media(max-width:360px){.k2,.regler.k2{flex-direction:column!important}.k2rechts{padding:12px!important}}

/* ===== Foodly 3.8.2 ===== */
html{background:#101412}
.prozentmitte{text-align:center;font-size:17px;font-weight:700;color:var(--salbei);line-height:22px;margin:2px 0 0;font-variant-numeric:tabular-nums}
.prozentmitte.offen{color:var(--grau);font-weight:600}
.k2stufe{flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:12px!important;font-size:24px!important;padding:0!important;display:grid;place-items:center}
.reglerzeile{display:flex;align-items:center;gap:6px}
.reglerzeile .schiene{flex:1 1 auto;min-width:0}
@media (max-width:360px){.k2stufe{flex-basis:40px!important;width:40px!important}}
.k2wert .prozent{display:none!important}.k2wert .prozent + .wort{display:inline!important}
/* Statuszeile mit fester Höhe: „Noch nicht bewertet“ und „55 %“ sind gleich hoch – die Karte wächst nicht. */
.k2wert{height:24px!important;min-height:0!important;line-height:24px!important;overflow:hidden}
.k2wert .prozent,.k2wert .offen,.k2wert .wort{line-height:24px}