/* ======================
   Kraftmahl – Rechner-Styles (Protein & TDEE)
   ====================== */

/* Brand-Farben */
.km-protein,
#tdee-rechner, #tdee-result,
#onerm-rechner, #onerm-result {
  --brand:#0f2b4a;
  --accent:#c9a227;
  --muted:#6c757d;
}

/* Titel / Intro */
.km-protein .pc__title{ font-family:'Montserrat',system-ui,Arial; color:var(--brand); font-weight:700; }
.km-protein .pc__intro{ color:#222; }

/* Karten */
.pc-card{
  background:#fff;
  border:1px solid #e8ebf2;
  border-radius:16px;
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(15,43,74,.06);
}
#tdee-rechner .pc-card,
#tdee-result .pc-card{ border-radius:14px; }

/* Formularelemente */
.pc-form .form-label{ font-weight:600; }
.pc-form .btn.btn-outline-primary{ border-color:var(--brand); color:var(--brand); }
.pc-form .btn-check:checked + .btn{ background:var(--brand); color:#fff; border-color:var(--brand); }

.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover{ filter:brightness(.96); }

.input-group-text{ background:#f3f5f9; border-color:#e8ebf2; }
.form-control:focus,
.form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(201,162,39,.2); }

/* KPI-Karten */
.pc-kpis{ display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:420px){ .pc-kpis{ grid-template-columns: repeat(3,1fr); } }
.pc-kpi{ background:linear-gradient(180deg,#fff,#f6f8fb); border:1px solid #edf0f6; border-radius:14px; padding:.85rem 1rem; }
.pc-kpi__label{ font-size:.9rem; color:var(--muted); }
.pc-kpi__value{ font-weight:700; font-size:1.25rem; color:#111; }

/* Balken (Proteinrechner) */
.pc-bar{ margin-top:.6rem; }
.pc-bar__head{ display:flex; justify-content:space-between; font-size:.9rem; color:#222; }
.pc-bar__track{ height:14px; border-radius:999px; background:#eef1f6; overflow:hidden; position:relative; }
.pc-bar__fill{ height:100%; width:0%; background:linear-gradient(180deg,#2a4f86,#0f2b4a); border-radius:999px; transition:width 800ms ease; }

/* Hero */
.hero-tool{
  background-size:cover;
  background-position:center;
  padding:5rem 0;
  position:relative;
}
.hero-tool::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hero-tool .container{ position:relative; z-index:1; }
.hero-tool .hero__title{ color:#fff; font-weight:800; font-size:2.4rem; }
.hero-tool .hero__subtitle{ color:#f1f1f1; font-size:1.2rem; margin-top:.75rem; }
.hero-tool .hero__cta{ padding:.9rem 1.4rem; font-weight:700; }

/* TDEE: Ziel/Anpassung – Buttons */
#tdee-rechner .btn-group{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  width:100%;
  border:0;
}

#tdee-rechner .btn-group .btn{
  flex:1 1 220px;
  white-space:normal;
  line-height:1.2;
  padding:.6rem .8rem;
  text-align:center;
  hyphens:auto;
  border-radius:12px !important; /* Einheitliche Ecken */
}

/* Checked/Toggled State */
#tdee-rechner .btn.btn-outline-primary,
#tdee-result  .btn.btn-outline-primary{ border-color:var(--brand); color:var(--brand); }
#tdee-rechner .btn-check:checked + .btn.btn-outline-primary,
#tdee-rechner .btn-check:checked + .btn.btn-outline-secondary{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}

/* Mobile Button Layout */
@media (max-width:576px){
  #tdee-rechner .btn-group .btn{
    flex:1 1 100%;
    font-size:.95rem;
    padding:.7rem .9rem;
  }
}

/* Slider-Zeile */
#tdee-rechner .form-range{ width:100%; }
#tdee-custom-val{ display:inline-block; min-width:3.5ch; text-align:right; }

/* Sonstiges */
.small.text-muted{ color:var(--muted)!important; }