:root{
  --bg:#160f0a;
  --bg-panel:#20160f;
  --line: #4a3623;
  --copper:#c1652b;
  --copper-light:#e08a46;
  --malt:#d9a441;
  --hop:#8a9c4a;
  --cream:#f1e7d2;
  --cream-dim:#c9bda3;
  --warn:#c1442e;
  --ok:#7a9c52;
  --info:#5c8a9c;
  --radius: 3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(193,101,43,0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(217,164,65,0.10), transparent 60%),
    var(--bg);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  min-height:100vh;
}
::selection{background:var(--copper);color:#160f0a;}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:var(--copper-light);}

.skip-link{
  position:absolute;
  left:16px;
  top:-48px;
  background:var(--copper);
  color:#160f0a;
  font-weight:700;
  padding:8px 12px;
  border-radius:var(--radius);
  z-index:120;
  text-decoration:none;
}
.skip-link:focus{top:12px;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- HERO ---------- */
.hero{padding:56px 0 40px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{width:40px;height:40px;flex:none;}
.brand-name{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;letter-spacing:0.01em;}
.brand-sub{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--cream-dim);margin-top:2px;}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.05;margin:28px 0 14px;max-width:16ch;}
.hero p.lede{max-width:56ch;color:var(--cream-dim);font-size:1.05rem;margin:0 0 30px;}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:32rem;}
.hero-start{min-width:160px;}
.hero-start-note{margin:0;color:var(--cream-dim);font-size:0.92rem;}

.field{flex:1;min-width:110px;}
.field label{display:block;font-size:0.72rem;color:var(--cream-dim);margin-bottom:5px;}
input[type=number],input[type=text],select{
  width:100%;background:#171008;border:1px solid var(--line);color:var(--cream);
  padding:9px 10px;border-radius:var(--radius);font-family:'IBM Plex Mono',monospace;font-size:0.92rem;
}
input[type=number]:focus,input[type=text]:focus,select:focus{outline:none;border-color:var(--copper);}

/* ---------- NAV ---------- */
.tabnav{position:sticky;top:0;z-index:20;background:rgba(22,15,10,0.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.tabnav-inner{display:flex;gap:2px;max-width:1080px;margin:0 auto;padding:0 24px;}
.tabbtn{
  background:none;border:none;color:var(--cream-dim);font-family:'Inter',sans-serif;font-weight:600;
  font-size:0.92rem;padding:16px 18px;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s, border-color .15s;
}
.tabbtn:hover{color:var(--cream);}
.tabbtn.active{color:var(--copper-light);border-color:var(--copper);}

.tabpanel{display:none;padding:44px 0 90px;}
.tabpanel.active{display:block;}

.section-eyebrow{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--copper-light);margin-bottom:8px;}
.section-title{font-size:1.7rem;margin:0 0 8px;}
.section-desc{color:var(--cream-dim);max-width:60ch;margin:0 0 32px;font-size:0.96rem;}

/* ---------- CARDS / PANELS ---------- */
.panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;}
.panel + .panel{margin-top:18px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr;}}

@media (max-width:760px){
  .tabnav{
    top:auto;
    bottom:0;
    border-bottom:none;
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .tabnav-inner{
    width:100%;
    padding:0;
  }
  .tabbtn{
    flex:1;
    min-height:58px;
    padding:12px 10px;
    font-size:0.88rem;
    border-bottom:none;
    border-top:2px solid transparent;
  }
  .tabbtn.active{border-top-color:var(--copper);}
  .tabpanel{padding:32px 0 110px;}
}

@media (max-width:560px){
  h2,
  h3,
  .section-title{
    line-height:1.18;
    overflow-wrap:anywhere;
    hyphens:auto;
    text-wrap:balance;
  }
}

.btn{
  background:var(--copper);color:#160f0a;border:none;font-weight:700;font-family:'Inter',sans-serif;
  padding:11px 20px;border-radius:var(--radius);cursor:pointer;font-size:0.9rem;transition:background .15s;
  text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--copper-light);}
.btn.secondary{background:transparent;color:var(--cream);border:1px solid var(--line);}
.btn.secondary:hover{border-color:var(--copper);color:var(--copper-light);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}
button.chip{
  background:#171008;border:1px solid var(--line);color:var(--cream-dim);padding:8px 14px;border-radius:20px;
  font-size:0.82rem;cursor:pointer;font-family:'Inter',sans-serif;
}
button.chip.active{border-color:var(--copper);color:var(--copper-light);background:rgba(193,101,43,0.12);}

.tabbtn:focus-visible,
.btn:focus-visible,
button.chip:focus-visible,
input[type=number]:focus-visible,
input[type=text]:focus-visible,
select:focus-visible,
summary:focus-visible,
a:focus-visible{
  outline:2px solid var(--copper-light);
  outline-offset:2px;
}

table{width:100%;border-collapse:collapse;font-size:0.9rem;}
th{text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--cream-dim);
   padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
td{padding:9px 10px;border-bottom:1px solid rgba(74,54,35,0.5);font-family:'IBM Plex Mono',monospace;vertical-align:top;}
tr:last-child td{border-bottom:none;}

@media (max-width:560px){
  .scroll-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    font-size:0.82rem;
    scrollbar-width:thin;
    scrollbar-color:var(--copper) #171008;
  }
  .scroll-table::-webkit-scrollbar{height:10px;}
  .scroll-table::-webkit-scrollbar-track{
    background:#171008;
    border:1px solid rgba(74,54,35,0.5);
    border-radius:999px;
  }
  .scroll-table::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg, var(--copper), var(--copper-light));
    border-radius:999px;
    border:1px solid rgba(22,15,10,0.45);
  }
  .scroll-table::-webkit-scrollbar-thumb:hover{background:var(--copper-light);}
  .scroll-table::before{
    content:'Nach rechts wischen';
    display:block;
    margin-bottom:6px;
    color:var(--cream-dim);
    font-size:0.72rem;
    letter-spacing:0.04em;
  }
  .scroll-table th,
  .scroll-table td{padding:8px 8px;white-space:nowrap;}
}

.result-line{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(74,54,35,0.5);}
.result-line:last-child{border-bottom:none;}
.result-line .k{color:var(--cream-dim);font-size:0.88rem;}
.result-line .v{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--copper-light);}

.tag{display:inline-block;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;padding:3px 8px;border-radius:20px;background:rgba(138,156,74,0.15);color:var(--hop);border:1px solid rgba(138,156,74,0.3);}

/* ---------- STEP NUMBERING (Brauführung – real sequence) ---------- */
.steprail{display:flex;gap:6px;margin-bottom:28px;flex-wrap:wrap;}
.steppill{
  display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:20px;
  font-size:0.78rem;color:var(--cream-dim);cursor:pointer;background:#171008;
}
.steppill .n{font-family:'IBM Plex Mono',monospace;color:var(--copper);font-weight:600;}
.steppill.current{border-color:var(--copper);color:var(--cream);}
.steppill.done{color:var(--ok);}
.steppill.done .n{color:var(--ok);}

/* ---------- GAUGE (signature element) ---------- */
.gauge-wrap{display:flex;align-items:center;gap:22px;}
.gauge svg{display:block;}
.gauge-readout{font-family:'IBM Plex Mono',monospace;}
.gauge-readout .big{font-size:2.1rem;color:var(--cream);}
.gauge-readout .status{margin-top:6px;font-size:0.85rem;padding:4px 10px;border-radius:20px;display:inline-block;}
.status-ok{background:rgba(122,156,82,0.18);color:var(--ok);}
.status-warn{background:rgba(217,164,65,0.18);color:var(--malt);}
.status-bad{background:rgba(193,68,46,0.18);color:#e8867a;}

.advice{border-left:3px solid var(--copper);padding:12px 16px;background:rgba(193,101,43,0.08);border-radius:0 var(--radius) var(--radius) 0;font-size:0.92rem;margin-top:14px;}
.advice.bad{border-color:var(--warn);background:rgba(193,68,46,0.08);}
.advice.ok{border-color:var(--ok);background:rgba(122,156,82,0.08);}

.timer-box{display:flex;align-items:center;gap:16px;background:#171008;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;}
.timer-num{font-family:'IBM Plex Mono',monospace;font-size:2rem;color:var(--copper-light);min-width:110px;}

.hopline{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(74,54,35,0.5);}
.hopline:last-child{border-bottom:none;}
.hopline.added{opacity:0.4;}
.hopline .due{font-family:'IBM Plex Mono',monospace;color:var(--copper-light);}

footer{border-top:1px solid var(--line);padding:26px 0;color:var(--cream-dim);font-size:0.8rem;text-align:center;}

.small{font-size:0.82rem;color:var(--cream-dim);}
.mt{margin-top:14px;}
.mt2{margin-top:24px;}
label.small{display:block;margin-bottom:5px;}

/* ---------- MODAL ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(11,8,5,0.72);backdrop-filter:blur(3px);
}
.modal-backdrop.open{display:flex;}
.modal-panel{
  width:min(520px,100%);background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 48px rgba(0,0,0,0.35);padding:22px 24px;
}
.modal-title{margin:0 0 8px;color:var(--cream);}
.modal-text{margin:0;color:var(--cream-dim);font-size:0.94rem;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px;}

/* ── Recipe library ──────────────────────────────────────────────────── */
#rz-library-panel{padding:14px 18px;}
#rz-library-panel summary::-webkit-details-marker{display:none;}
.library-row{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.library-row:last-child{border-bottom:none;}
.library-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.library-info strong{color:var(--cream);font-size:0.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.library-info .small{color:var(--cream-dim);font-size:0.8rem;}
.library-actions{display:flex;gap:6px;flex-shrink:0;}
.small-btn{padding:4px 10px;font-size:0.8rem;}
.small-btn.danger{color:var(--warn);border-color:var(--warn);}
.small-btn.danger:hover{background:var(--warn);color:#fff;}