:root{
  --bg:#f4f7f8; --surface:#ffffff; --ink:#1d2b33; --muted:#5c6f78;
  --line:#d9e2e6; --accent:#0e6c77; --accent-soft:#e3f0f2;
  --re:#c9302c; --le:#2456c4; --green:#2e8b57; --ochre:#b9762f;
  --radius:10px; --focus:0 0 0 3px rgba(14,108,119,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
header.app{
  max-width:780px; margin:0 auto; padding:22px 16px 6px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
header.app h1{
  font-size:26px; font-weight:600; letter-spacing:.2px; margin:0;
  display:flex; align-items:center; gap:10px;
}
header.app h1 .logo{
  width:32px; height:32px; display:block;
  border-radius:7px; box-shadow:0 1px 3px rgba(29,43,51,.25);
}
main{max-width:780px; margin:0 auto; padding:10px 16px 30px}

.intro{margin-bottom:16px}
.intro h2{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  cursor:pointer; user-select:none;
}
.intro h2 > span{grid-column:1; grid-row:1; justify-self:start}
#introToggle {
  grid-column: 3; 
  grid-row: 1; 
  justify-self: end;
  appearance: none; 
  border: 0; 
  background: transparent; 
  cursor: pointer;
  color: inherit; 
  font-size: 32px; 
  padding: 0 4px;
  transition: transform .15s;
  
  /* Anpassungen für die korrekte Höhe: */
  height: 16px;          /* Begrenzt die Höhe des Buttons */
  line-height: 0;        /* Verhindert, dass die Schriftgröße die Box aufspannt */
  display: flex;         /* Ermöglicht die saubere Zentrierung des Pfeils */
  align-items: center; 
}
.intro.collapsed #introToggle{transform:rotate(-90deg)}
.intro.collapsed #introBody{display:none}
.intro.collapsed h2{margin-bottom:-16px; border-bottom:0}
#introToggle:focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px}
.intro p{margin:0 0 8px; font-size:14.5px; max-width:75ch}
.intro p:last-child{margin-bottom:0}
.intro p.hint{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13.5px;
}
#btnInstall{
  grid-column:2; grid-row:1; justify-self:center;
  appearance:none; cursor:pointer; font:inherit;
  font-size:13px; font-weight:600; letter-spacing:normal; text-transform:none;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:6px; padding:3px 10px; line-height:1.3;
}
#btnInstall:hover{border-color:var(--accent); color:var(--accent)}
#btnInstall:focus-visible{outline:none; box-shadow:var(--focus)}
.intro a.tablink{
  color:var(--accent); font-weight:600; text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px;
}
.intro a.tablink:hover{text-decoration-style:solid}

/* Tabs */
.tabs{
  display:flex; gap:6px; align-items:flex-end;
  margin-bottom:0; padding:0 12px;
}
.tabs button{
  appearance:none; cursor:pointer; font:inherit; font-weight:600;
  border:1px solid var(--line); border-bottom:none;
  border-radius:9px 9px 0 0;
  background:linear-gradient(#f7fafb, #e7edf0); color:var(--muted);
  padding:8px 14px 7px; white-space:nowrap;
  box-shadow:inset 0 -4px 5px -4px rgba(29,43,51,.18);
}
.tabs button:hover{color:var(--accent)}
.tabs button[aria-selected="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff;
  padding-top:11px; box-shadow:none;
}
.tabs button:focus-visible{outline:none; box-shadow:var(--focus)}
@media (max-width:640px){
  .tabs{flex-direction:column; align-items:stretch; padding:0; margin-bottom:12px}
  .tabbox{padding:10px}
  .tabs button{
    border-radius:8px; border-bottom:1px solid var(--line);
    text-align:left; white-space:normal; padding:9px 14px;
    box-shadow:0 1px 2px rgba(29,43,51,.06);
  }
  .tabs button[aria-selected="true"]{padding-top:9px; border-bottom:1px solid var(--accent)}
}

.panel{display:none}
.panel.active{display:block}
.tabbox{
  border:2px solid var(--line);
  padding:16px; margin-bottom:4px;
}

.grid{display:grid; grid-template-columns:minmax(280px,370px) auto; gap:16px; align-items:start; justify-content:space-between}
.grid.equal{grid-template-columns:repeat(2, minmax(0,1fr)); justify-content:stretch}
.grid.equal .viz svg{margin:0 auto}
.grid.equal .legend{justify-content:center}
@media (max-width:760px){ .grid, .grid.equal{grid-template-columns:1fr} .viz{justify-self:center; width:100%} }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px 16px; box-shadow:0 1px 2px rgba(29,43,51,.05); overflow:hidden;
}
.card h2{
  margin:-14px -16px 12px; padding:8px 16px 7px;
  font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent); border-bottom:1px solid var(--line);
}
.hd-green h2{background:#e6f5e9; color:#22663f; border-bottom-color:#cfe8d6}
.hd-ochre h2{background:#f9f1dc; color:#7f5418; border-bottom-color:#ecdfc0}
.result-re h2{background:#fbe9e8; color:#9c221e; border-bottom-color:#f2d2d0}
.result-le h2{background:#e9effb; color:#1a419b; border-bottom-color:#d3ddf2}
.stack>.card+.card{margin-top:14px}

.row{display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap}
.row>label:first-child, .row>.lbl{min-width:64px; color:var(--muted); font-size:14px}
.unit{color:var(--muted); font-size:13.5px}

/* Segmented radio groups */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{
  padding:5px 14px; cursor:pointer; font-size:14px; color:var(--muted);
  background:var(--surface); border-left:1px solid var(--line); user-select:none;
}
.seg label:first-of-type{border-left:0}
.seg input:checked+label{background:var(--accent); color:#fff}
.seg input:focus-visible+label{box-shadow:var(--focus); position:relative; z-index:1}

/* Numeric field with steppers */
.num{display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.num input{
  width:78px; border:0; padding:6px 8px; font:inherit; font-variant-numeric:tabular-nums;
  text-align:right; background:transparent; color:var(--ink);
}
.num input:focus{outline:none}
.num:focus-within{box-shadow:var(--focus); border-color:var(--accent)}
.num .btns{display:flex; flex-direction:column; border-left:1px solid var(--line)}
.num .btns button{
  appearance:none; border:0; background:var(--accent-soft); color:var(--accent);
  width:26px; flex:1; cursor:pointer; font-size:10px; line-height:1; padding:0;
}
.num .btns button:first-child{border-bottom:1px solid var(--line)}
.num .btns button:active{background:var(--accent); color:#fff}
.num input[readonly]{background:#f2f5f6; color:var(--ink)}
.num.ro{background:#f2f5f6}
output.box, .box{
  display:inline-block; min-width:78px; padding:6px 10px; text-align:right;
  border:1px solid var(--line); border-radius:8px; background:#f2f5f6;
  font-variant-numeric:tabular-nums;
}


.viz{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:0 1px 2px rgba(29,43,51,.05)}
.viz svg{display:block; max-width:100%; height:auto}

.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--muted)}
.legend i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle}

.toolbar{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.toolbar button, .btn{
  appearance:none; font:inherit; font-weight:600; cursor:pointer;
  color:var(--ink); border:1px solid #b3c2c9; border-radius:8px; padding:9px 18px;
  background:linear-gradient(#ffffff, #e9eff2);
  box-shadow:0 1px 2px rgba(29,43,51,.18), inset 0 1px 0 #fff;
}
.toolbar button:hover, .btn:hover{
  border-color:var(--accent); color:var(--accent);
  background:linear-gradient(#ffffff, #e0edef);
}
.toolbar button:active, .btn:active{
  transform:translateY(1px);
  background:#e4ebee;
  box-shadow:inset 0 1px 3px rgba(29,43,51,.22);
}
.toolbar button:focus-visible{outline:none; box-shadow:var(--focus)}
kbd{
  font:12px/1 ui-monospace,Consolas,monospace; background:#eef2f4; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px; padding:2px 6px;
}

/* Converter */
.converter .row{align-items:center}
.swap{
  appearance:none; border:1px solid var(--line); background:var(--surface); border-radius:8px;
  width:34px; height:30px; cursor:pointer; font-size:15px; color:var(--accent);
}
.swap:hover{border-color:var(--accent)}

footer{
  max-width:780px; margin:0 auto; padding:8px 16px 26px; color:var(--muted); font-size:13px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
footer a{color:var(--accent); text-decoration:none}
footer a:hover{text-decoration:underline}

dialog{
  border:1px solid var(--line); border-radius:12px; padding:20px 24px; max-width:360px;
  box-shadow:0 12px 40px rgba(29,43,51,.25);
}
dialog::backdrop{background:rgba(29,43,51,.35)}
dialog h2{margin:0 0 12px; font-size:16px}
dialog table{border-collapse:collapse; font-size:14px}
dialog td{padding:3px 12px 3px 0; vertical-align:top}
dialog .close{margin-top:14px}

#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:9px 16px; border-radius:8px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:90vw;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){ #toast{transition:none} }