:root{
  /* Orange / White / Black theme */
  --bg:#ffffff; --text:#111; --muted:#5a6472; --panel:#f7f7f8; --border:#e9eaee;
  --accent:#ff9900; --black:#000; --white:#fff;
  --ring: rgba(255,153,0,.25);
  --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.08);
  --font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans';
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0d0f; --text:#eef1f5; --muted:#9aa4b2; --panel:#14161a; --border:#242834; --shadow:0 14px 36px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--font)}

/* Layout */
.container{max-width:980px; margin:0 auto; padding:clamp(16px,3vw,28px)}
.hero h1{font-size:clamp(1.6rem,3.5vw,2.2rem); margin:6px 0 4px}
.lead{color:var(--muted); margin:0 0 10px}

/* Card / Panels */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);  padding: clamp(14px,2vw,20px)}
.form{display:grid; gap:16px}
.panel{background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px}
@media(prefers-color-scheme: dark){ .panel{ background:#0f1114; border-color:#242834 } }
.grid{display:grid; gap:16px}
.grid.onecol{ grid-template-columns: 1fr }
@media(min-width:720px){ .grid{ grid-template-columns:1fr 1fr } }
.stack{display:grid; gap:8px}
.hint{color:var(--muted); font-size:.92rem}

/* Unit row (simple mode) */
.unit-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.unit-row .unit-label{ color:var(--muted); font-weight:600 }
@media(max-width:520px){ .unit-row .segmented{ width:100% } }

/* Inputs */
input[type="text"], input[type="number"]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:#111;
  
}
@media(prefers-color-scheme: dark){
  input[type="text"], input[type="number"]{ background:#0f1114; color:#eef1f5; border-color:#242834; }
}
input:focus{ outline:none; border-color:var(--accent);  }

/* iOS segmented (geometry fixed) */
.segmented{ 
  --pad: 4px; --gap: 2px; 
  position: relative; display: grid; grid-template-columns: 1fr 1fr; 
  gap: var(--gap); padding: var(--pad); border-radius: 999px; 
  background:#fff; border:1px solid var(--border); overflow:hidden;
  
}
.segmented.small{ --pad:3px; --gap:2px; }
@media(prefers-color-scheme: dark){ .segmented{ background:#0f1114; border-color:#242834 } }
.segmented input{ position:absolute; opacity:0; pointer-events:none }
.segmented label{ 
  position:relative; z-index:2; padding:10px 12px; 
  cursor:pointer; color:var(--muted); user-select:none; font-weight:800; 
  border-radius:999px; white-space:normal; text-align:center; line-height:1.15; 
  min-width:0; 
}
.segmented .thumb{ position:absolute; z-index:1; top:var(--pad); bottom:var(--pad); left:var(--pad); width: calc(50% - (var(--pad) + var(--gap)/2)); background:var(--accent); border-radius:999px;  transform: translateX(0%); transition: transform .35s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.segmented input:checked + label{ color:#fff }
.segmented input[id$="simple"]:checked ~ .thumb{ transform: translateX(0%) }
.segmented input[id$="pro"]:checked ~ .thumb{ transform: translateX(100%) }
.segmented input[id$="-L"]:checked ~ .thumb{ transform: translateX(0%) }
.segmented input[id$="-ml"]:checked ~ .thumb{ transform: translateX(100%) }
.segmented input[id$="total"]:checked ~ .thumb{ transform: translateX(0%) }
.segmented input[id$="conc"]:checked ~ .thumb{ transform: translateX(100%) }

/* Chips */
.presets-wrap{ border:1px dashed var(--border); border-radius:12px; padding:8px 10px; background:#fff }
.presets-wrap summary{ cursor:pointer; font-weight:800 }
.presets{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.presets button{padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:800}
.presets button:hover{ border-color:var(--accent) }
@media(prefers-color-scheme: dark){ .presets-wrap, .presets button{ background:#0f1114 } }

/* Buttons */
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn{appearance:none; border:1px solid transparent; background:var(--accent); color:white; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:800; text-decoration:none}
.btn:hover{ filter:brightness(0.95) }
@media(max-width:520px){ .actions{ display:grid; grid-template-columns:1fr; gap:8px } .btn{ width:100% } }

/* Results */
.results{ display:grid; grid-template-columns:1fr; gap:12px; margin:16px 0 6px }
.result-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px;  margin-bottom:6px }
.result-values{ display:grid; gap:6px; font-size:1.05rem }
.label{ color:var(--muted); font-weight:600 }
.error{ color:#d63939; font-weight:700 }

/* Donut chart + legend */
.graph{ display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center }
svg#donut{ width:min(84vw, 260px); height:auto }
.donut-ring{ fill:transparent; stroke:#eee; stroke-width:6 }
.donut-segment{ fill:transparent; stroke-width:6; transition: stroke-dasharray .6s cubic-bezier(.22,.61,.36,1) }
.donut-segment.product{ stroke:#ff9900 }
.donut-segment.water{ stroke:#111 }
.legend{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap }
.legend-item{ display:inline-flex; align-items:center; gap:8px; font-weight:600 }
.legend .dot{ width:10px; height:10px; border-radius:50% }
.legend .dot.product{ background:#ff9900 }
.legend .dot.water{ background:#111 }
@media(min-width: 520px){
  .graph{ flex-direction:row; }
  .legend{ flex-direction:column; align-items:flex-start; justify-content:center }
}

/* Textual result */
.result-text{ margin-top:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; line-height:1.55 }
.result-text strong{ font-weight:800 }

/* Back */
.back{ display:grid; gap:8px; justify-items:center; margin:18px 0 8px }
.back-btn{ background:#111; }
.back .hint{ color:var(--muted) }

/* Footer */
.site-footer{ border-top:1px solid var(--border); color:var(--muted) }
/* Overflow safety */
*{ min-width:0 } .result-values div{ display:flex; gap:6px; flex-wrap:wrap; align-items:baseline }

/* === Mobile label fit for Pro segmented (Gesamtmenge / Vorhandenes Konzentrat) === */
.segmented{ align-items:stretch }
.segmented label{
  display:flex; align-items:center; justify-content:center;
  text-align:center; white-space:normal; overflow-wrap:anywhere;
  font-size: clamp(.82rem, 3.2vw, 1rem);
  line-height:1.1;
}
@media(max-width: 420px){
  .segmented label{ font-size: clamp(.78rem, 3.8vw, .94rem); padding:8px 10px }
  #proPanel .segmented{ width:100% }
}

/* Ensure L/ml sits visually centered inside the pill on desktop too */
#proPanel .segmented.small label, #simplePanel .segmented.small label{
  display:flex; align-items:center; justify-content:center;
  line-height:1; font-size:1rem;
}

/* Thumb perfect rounding and no bleed */
.segmented{ overflow:hidden; border-radius: 999px }
.segmented .thumb{ position:absolute; z-index:1; top:var(--pad); bottom:var(--pad); left:var(--pad); width: calc(50% - (var(--pad) + var(--gap)/2)); background:var(--accent); border-radius:999px;  transform: translateX(0%); transition: transform .35s cubic-bezier(.22,.61,.36,1); will-change: transform; }

/* Extra room for two-line labels in Pro calc segmented */
#proPanel .segmented:not(.small){ min-height: 44px }

.result-tip{ margin-top:8px; background:#fff; border:1px dashed var(--border); border-radius:12px; padding:10px 12px; color:var(--muted) }
.result-tip strong{ color:#111 }

@media(max-width: 420px){
  #proPanel .segmented label{
    font-size: clamp(.72rem, 3.5vw, .88rem);
    padding:6px 8px;
  }
}

@media(max-width: 480px){
  .result-sentence{ font-size: clamp(.8rem, 3.8vw, .95rem); }
}

/* === iOS safe background & no zoom on input === */
html, body{ background:#ffffff !important; -webkit-text-size-adjust: 100%; }
input, select, textarea{ font-size: 16px; line-height: 1.3; }
/* Keep buttons readable too */
button{ font-size: 16px; }
/* Ensure no gradient/transparent areas around edges on iPhone safe areas */
body{ background-color:#ffffff; }

/* === Fix: keep light cards when body background is forced white === */
@media (prefers-color-scheme: dark){
  :root{
    /* Use the light palette to match the white page background */
    --bg:#ffffff; --text:#111; --muted:#5a6472; --panel:#ffffff; --border:#e9eaee;
    --accent:#ff9900;
  }
  body{ color: var(--text); background:#ffffff !important; }
  .card, .panel, .result-card, .result-text, .presets-wrap, .result-tip{ 
    background:#ffffff !important; color:#111 !important; border-color:#e9eaee !important;
  }
}

/* === Force light theme regardless of system setting === */
:root{
  --bg:#ffffff; --text:#111; --muted:#5a6472; --panel:#ffffff; --border:#e9eaee;
  --accent:#ff9900;
}
html, body{
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
input, select, textarea{
  background-color: #ffffff !important;
  color: #111 !important;
  border: 1px solid var(--border) !important;
}
.card, .panel, .result-card, .result-text, .presets-wrap, .result-tip{
  background-color:#ffffff !important;
  color:#111 !important;
  border-color: var(--border) !important;
}

/* === Force segmented control to light theme === */
.segmented {
  background-color: #ffffff !important;
  border: 1px solid var(--border) !important;
}
.segmented label {
  background-color: #ffffff !important;
  color: #111 !important;
}
.segmented input:checked + label {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}
.segmented .thumb{ position:absolute; z-index:1; top:var(--pad); bottom:var(--pad); left:var(--pad); width: calc(50% - (var(--pad) + var(--gap)/2)); background:var(--accent); border-radius:999px;  transform: translateX(0%); transition: transform .35s cubic-bezier(.22,.61,.36,1); will-change: transform; }

/* Quick select buttons light theme */
.presets-wrap button {
  background-color: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: #111 !important;
}
.presets-wrap button:hover {
  background-color: #fff3e0 !important; /* light orange hover */
}
.presets-wrap button.active {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}

#phValue { background-color:#ffffff; color:#111; border:1px solid var(--border); }

.result-note{ margin-top:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px }
@media(max-width: 480px){
  .result-note .result-sentence{ font-size: clamp(.8rem, 3.6vw, .95rem); }
}


.ph-info:focus + .ph-tip, .ph-info:hover + .ph-tip{ display:inline }

/* Gyártói adat label styling */
.gyartoi-adat {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9em;
  color: #666;
}

/* Lighter, spaced meta hint under pH field */
.hint-meta{
  display:block;
  margin-top:12px;
  color:#666;
  font-size:0.9rem;
}
@media (max-width: 480px){
  .hint-meta{ margin-top:14px; font-size:0.92rem; }
}

/* --- Layout de-clutter --- */
.form{ gap: 18px }
.panel{ padding: 18px }
.grid{ gap: 18px }
.stack{ gap: 10px }
label{ line-height: 1.2 }
.hint{ line-height: 1.3 }

/* Tie the hint to the pH field and add space below the pH block */
.ph-stack .hint-meta{ margin-top: 10px }
.ph-stack{ margin-bottom: 14px }

@media(max-width: 480px){
  .form{ gap: 16px }
  .panel{ padding: 16px }
  .grid{ gap: 16px }
  .stack{ gap: 9px }
}

.result-sentence-box{
  margin-top:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px;
}
.result-sentence{ font-size:1rem; line-height:1.5 }
@media(max-width: 480px){
  .result-sentence{ font-size: .95rem }
}

.error:empty{ display:none }

/* Tri-segment (l / dl / ml) for de-AT */
.segmented.tri{ grid-template-columns: 1fr 1fr 1fr; }
.segmented.tri .thumb{
  width: calc((100% - (var(--pad)*2) - (var(--gap)*2)) / 3);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
/* Positions based on id suffix */
.segmented.tri input[id$="-l"]:checked ~ .thumb{ transform: translateX(0%); }
.segmented.tri input[id$="-dl"]:checked ~ .thumb{ transform: translateX(100%); }
.segmented.tri input[id$="-ml"]:checked ~ .thumb{ transform: translateX(200%); }