/* =========================================================
       AquariumLesson • pH & CO₂ Calculator (Premium 2026)
       Mobile-first • Mode-first flow: Mode → Inputs → Result → Advanced
       Includes HARD overrides for Elementor/Theme radio styling.
       ========================================================= */

    :root{
      --al-green:#2c6b4a;
      --al-green-2:#5CA892;
      --al-ink:#1f2a24;
      --al-muted:rgba(31,42,36,.72);
      --al-line:rgba(31,42,36,.12);
      --al-card:#fff;
      --al-soft:#f4f8f6;
      --al-shadow:0 10px 30px rgba(0,0,0,.06);
      --r:14px;
      --r2:12px;
      --pill:999px;
    }
    
    /* Scope: alles nur innerhalb des Rechners */
.al-phco2-root{ background:#fff; color: var(--al-ink); }
.al-phco2-root body{ } /* (nicht nötig) */


    *{ box-sizing:border-box; }
    body{
      margin:0;
      background:#fff;
      color:var(--al-ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.5;
    }

    .wrap{
      max-width: 980px;
      margin: 0 auto;
      padding: 18px 16px 44px;
    }

    /* Header */
    .title{
      text-align:center;
      margin: 8px 0 18px;
    }
    .title h1{
      font-family: Poppins, Inter, system-ui, sans-serif;
      font-weight: 900;
      font-size: clamp(1.9rem, 4.2vw, 2.8rem);
      line-height:1.12;
      letter-spacing:-.01em;
      margin: 10px 0 8px;
    }
    .title p{
      margin:0 auto;
      max-width: 860px;
      color: var(--al-muted);
      font-weight: 600;
      font-size: clamp(1.0rem, 2.2vw, 1.15rem);
    }

    /* Card */
    .card{
      background: var(--al-card);
      border:1px solid var(--al-line);
      border-radius: var(--r);
      box-shadow: var(--al-shadow);
      overflow:hidden;
    }
    .card + .card{ margin-top: 14px; }
    .card__hd{
      padding: 14px 16px;
      border-bottom:1px solid rgba(31,42,36,.08);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .kicker{
      font-family:Poppins, Inter, system-ui, sans-serif;
      text-transform:uppercase;
      letter-spacing:.09em;
      font-weight: 900;
      font-size: .78rem;
      color: rgba(31,42,36,.55);
    }
    .hdTitle{
      font-weight:950;
      font-family:Poppins,Inter,system-ui,sans-serif;
      font-size: 1.06rem;
    }
    .meta{
      font-weight: 850;
      color: rgba(31,42,36,.60);
      font-size: .92rem;
      white-space:nowrap;
    }
    .card__bd{ padding: 16px; }

    /* Mode selector */
    .modes{
      display:grid;
      gap: 10px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 860px){
      .modes{ grid-template-columns: 1fr 1fr 1fr; }
    }

    .mode{
      position:relative !important;
      border:1px solid rgba(31,42,36,.12);
      border-radius: var(--r);
      background: #fff;
      padding: 14px 14px 12px;
      cursor:pointer;
      transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
      min-height: 112px;
      display:block !important;
    }
    .mode:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(0,0,0,.06);
    }

    /* HARD FIX: hide real radios even if Elementor/theme styles them */
    #modeGrid .mode input[type="radio"]{
      position:absolute !important;
      left:-9999px !important;
      top:auto !important;
      width:1px !important;
      height:1px !important;
      opacity:0 !important;
      pointer-events:none !important;
      appearance:none !important;
      -webkit-appearance:none !important;
    }

    .mode__top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 6px;
    }
    .mode__title{
      font-family:Poppins, Inter, system-ui, sans-serif;
      font-weight: 950;
      font-size: 1.05rem;
      line-height:1.2;
      letter-spacing:-.01em;
    }
    .mode__desc{
      color: rgba(31,42,36,.72);
      font-weight: 650;
      font-size: .95rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.22rem .55rem;
      border-radius: var(--pill);
      border:1px solid rgba(44,107,74,.18);
      background: rgba(44,107,74,.10);
      color: var(--al-green);
      font-weight: 950;
      font-size: .88rem;
      white-space:nowrap;
    }
    .radioDot{
      display:inline-block !important;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid rgba(31,42,36,.20);
      background:#fff;
      flex:0 0 auto;
      margin-top: 2px;
      box-shadow: inset 0 0 0 3px #fff;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }
    .mode.is-active{
      border-color: rgba(44,107,74,.35);
      background: linear-gradient(180deg, rgba(44,107,74,.10), rgba(44,107,74,.05));
    }
    .mode.is-active .radioDot{
      border-color: rgba(44,107,74,.60);
      background: var(--al-green);
      box-shadow: inset 0 0 0 3px #fff, 0 8px 16px rgba(44,107,74,.20);
    }

    /* Steps */
    .step{
      display:none;
      opacity:0;
      transform: translateY(6px);
      transition: opacity .18s ease, transform .18s ease;
    }
    .step.is-visible{
      display:block;
      opacity:1;
      transform: translateY(0);
    }

    /* Form fields */
    .grid{
      display:grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 760px){
      .grid.two{ grid-template-columns: 1fr 1fr; }
    }

    .field label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      font-weight: 950;
      color: rgba(31,42,36,.85);
      margin-bottom: 6px;
      min-height: 24px;
    }
    .unit{
      display:inline-flex;
      align-items:center;
      padding:.18rem .52rem;
      border-radius: var(--pill);
      border:1px solid rgba(31,42,36,.12);
      background: rgba(31,42,36,.05);
      color: rgba(31,42,36,.78);
      font-weight: 950;
      font-size: .86rem;
      white-space:nowrap;
    }
    .hint{
      margin-top: 8px;
      color: rgba(31,42,36,.64);
      font-weight: 650;
      font-size: .92rem;
    }

    input[type="number"], input[type="text"]{
      width:100%;
      height: 46px;
      padding: .72rem .8rem;
      border-radius: 12px;
      border:1px solid rgba(31,42,36,.16);
      outline:none;
      background:#fff;
      font-weight: 780;
      transition: box-shadow .15s ease, border-color .15s ease;
    }
    input:focus{
      border-color: rgba(44,107,74,.55);
      box-shadow: 0 0 0 4px rgba(44,107,74,.14);
    }
    input[readonly]{
      background: rgba(31,42,36,.03);
      color: rgba(31,42,36,.82);
    }
    .err{
      border-color: rgba(231,76,60,.60) !important;
      box-shadow: 0 0 0 4px rgba(231,76,60,.12) !important;
    }

    /* Buttons */
    .actions{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      margin-top: 12px;
    }
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;

  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;

  height: auto;
  padding: .45rem .90rem;
  border-radius: 10px;

  transition:
    transform .12s ease,
    box-shadow .15s ease,
    background .15s ease,
    opacity .15s ease;

  user-select:none;
  width: auto;
}

    @media (min-width: 520px){
      .btn{ width:auto; }
    }
    .btn--primary{
      background: var(--al-green);
      color:#fff;
      box-shadow: 0 10px 20px rgba(44,107,74,.22);
    }
    .btn--primary:hover{ transform: translateY(-1px); opacity:.98; }
    .btn--ghost{
      background: rgba(31,42,36,.06);
      color: rgba(31,42,36,.86);
      border:1px solid rgba(31,42,36,.10);
      box-shadow:none;
    }
    .btn--ghost:hover{ transform: translateY(-1px); }
    .btn--outline{
      background:#fff;
      color: var(--al-green);
      border: 1px solid rgba(44,107,74,.45);
      box-shadow:none;
    }
    .btn--outline:hover{ background: rgba(44,107,74,.06); transform: translateY(-1px); }

    /* Result action row */
    .al-toolActionRow{
      margin-top: 14px;
      padding: 14px;
      border: 1px solid rgba(31,42,36,.10);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(244,248,246,.96), rgba(255,255,255,.98));
      box-shadow: 0 10px 26px rgba(0,0,0,.05);
      display: grid;
      gap: 14px;
    }
    .al-toolActionRow__copy{
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .al-toolActionRow__eyebrow{
      font-family: Poppins, Inter, system-ui, sans-serif;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 900;
      font-size: .74rem;
      color: rgba(31,42,36,.55);
    }
    .al-toolActionRow__title{
      font-family: Poppins, Inter, system-ui, sans-serif;
      font-weight: 900;
      font-size: 1.02rem;
      line-height: 1.2;
      color: var(--al-ink);
    }
    .al-toolActionRow__sub{
      color: rgba(31,42,36,.68);
      font-weight: 650;
      font-size: .92rem;
      line-height: 1.45;
    }
    .al-toolActionRow__actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .al-toolActionRow__actions .btn{
      min-height: 46px;
      border-radius: 14px;
      padding: .7rem 1rem;
      font-weight: 800;
    }
    .al-toolActionRow__btn--primary{
      flex: 1 1 100%;
    }
    .al-toolActionRow__btn--secondary,
    .al-toolActionRow__btn--utility{
      flex: 1 1 calc(50% - 5px);
    }
    @media (min-width: 760px){
      .al-toolActionRow{
        grid-template-columns: minmax(0, 1fr) auto;
        align-items:center;
      }
      .al-toolActionRow__actions{
        justify-content:flex-end;
      }
      .al-toolActionRow__btn--primary,
      .al-toolActionRow__btn--secondary,
      .al-toolActionRow__btn--utility{
        flex: 0 0 auto;
      }
    }

    /* Result */
    .hero{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
    }
    .hero__value{
      display:flex;
      align-items:baseline;
      gap: 10px;
      flex-wrap:wrap;
    }
    .hero__label{
      font-weight: 950;
      color: rgba(31,42,36,.76);
    }
    .hero__num{
      font-family:Poppins, Inter, system-ui, sans-serif;
      font-weight: 980;
      font-size: 2.2rem;
      letter-spacing:-.02em;
    }
    .hero__unit{
      font-weight: 950;
      color: rgba(31,42,36,.68);
      font-size: 1.05rem;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: .42rem .75rem;
      border-radius: var(--pill);
      font-weight: 980;
      letter-spacing:.03em;
      text-transform:uppercase;
      border: 1px solid rgba(31,42,36,.12);
      box-shadow: 0 10px 22px rgba(0,0,0,.06);
      white-space:nowrap;
    }
    .badge[data-level="info"]{ background: rgba(31,42,36,.06); color: rgba(31,42,36,.86); }
    .badge[data-level="ok"]{ background: rgba(44,107,74,.16); color: var(--al-green); border-color: rgba(44,107,74,.22); }
    .badge[data-level="warn"]{ background: var(--al-green); color:#fff; border-color: rgba(44,107,74,.35); }

    .note{
      margin-top: 8px;
      color: rgba(31,42,36,.80);
      font-weight: 650;
    }

    .reco{
      margin-top: 14px;
      background: linear-gradient(180deg, rgba(44,107,74,.10), rgba(44,107,74,.06));
      border: 1px solid rgba(44,107,74,.18);
      border-radius: var(--r);
      padding: 12px 12px 10px;
    }
    .reco__title{
      font-family:Poppins, Inter, system-ui, sans-serif;
      font-weight: 980;
      font-size: 1.05rem;
      margin: 0 0 6px;
    }
    .reco__lead{
      margin:0 0 8px;
      color: rgba(31,42,36,.82);
      font-weight: 650;
    }
    .reco ul{
      margin:0;
      padding-left: 18px;
      color: rgba(31,42,36,.80);
      font-weight: 650;
    }
    .reco li{ margin: 4px 0; }

    /* Advanced details */
    details{
      margin-top: 12px;
      border:1px solid rgba(31,42,36,.12);
      border-radius: var(--r);
      background:#fff;
      box-shadow: var(--al-shadow);
      overflow:hidden;
    }
    summary{
      list-style:none;
      cursor:pointer;
      padding: 12px 14px;
      font-weight: 980;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
    }
    summary::-webkit-details-marker{ display:none; }
    .details__bd{
      padding: 12px 14px 14px;
      border-top:1px solid rgba(31,42,36,.08);
      color: rgba(31,42,36,.82);
      font-weight: 650;
    }
    .kv{
      display:grid;
      gap: 8px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 760px){
      .kv{ grid-template-columns: 1fr 1fr; }
    }
    .kv__row{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 10px;
      border-radius: 12px;
      background: rgba(31,42,36,.03);
      border: 1px solid rgba(31,42,36,.06);
    }
    .kv__k{ font-weight: 950; color: rgba(31,42,36,.78); }
    .kv__v{ font-weight: 980; color: var(--al-ink); font-variant-numeric: tabular-nums; }

    /* Chart wrapper */
    .chartWrap{
      margin-top: 10px;
      border:1px solid rgba(31,42,36,.12);
      border-radius: var(--r);
      background:#fff;
      padding: 10px 10px 14px;
      min-height: 420px;
    }
    canvas{ width:100% !important; height: 380px !important; }

    /* Toast */
    .toast{
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(31,42,36,.92);
      color:#fff;
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 900;
      font-size: .95rem;
      box-shadow: 0 16px 34px rgba(0,0,0,.18);
      opacity:0;
      pointer-events:none;
      transition: opacity .16s ease, transform .16s ease;
      z-index: 9999;
      max-width: calc(100vw - 26px);
      text-align:center;
    }
    .toast.is-on{
      opacity:1;
      transform: translateX(-50%) translateY(-2px);
    }

summary:focus{ outline:none; }
summary:focus-visible{ box-shadow: 0 0 0 4px rgba(44,107,74,.14); border-radius: var(--r); }

/* --- HARD override for theme/Elementor button styling (place at END) --- */
button.btn,
a.btn,
input.btn[type="button"],
input.btn[type="submit"]{
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 0 !important;
  outline: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  line-height: 1.2 !important;

  padding: .45rem .90rem !important;
  border-radius: 10px !important;

  text-decoration: none !important;
  cursor: pointer !important;

  width: auto !important;
  height: auto !important;
}

/* Variants */
button.btn.btn--primary,
a.btn.btn--primary{
  background: var(--al-green) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(44,107,74,.22) !important;
}

button.btn.btn--ghost,
a.btn.btn--ghost{
  background: rgba(31,42,36,.06) !important;
  color: rgba(31,42,36,.86) !important;
  border: 1px solid rgba(31,42,36,.10) !important;
  box-shadow: none !important;
}

button.btn.btn--outline,
a.btn.btn--outline{
  background: #fff !important;
  color: var(--al-green) !important;
  border: 1px solid rgba(44,107,74,.45) !important;
  box-shadow: none !important;
}

/* Hover (optional) */
button.btn.btn--primary:hover,
button.btn.btn--ghost:hover,
button.btn.btn--outline:hover{
  transform: translateY(-1px) !important;
}

.safetyBox{
  padding: .72rem .8rem;
  border-radius: 12px;
  border:1px solid rgba(31,42,36,.12);
  background: rgba(31,42,36,.04);
  font-weight: 700;
  color: rgba(31,42,36,.85);
}

.al-phco2-root .card details + details { margin-top: 8px; }

/* FAQ: Answer-Text braucht Padding (sonst klebt er) */
.al-phco2-root details > .hint{
  padding: 0 14px 14px;   /* links/rechts + unten */
  margin-top: 0;          /* sonst doppelt */
}

/* optional: etwas Luft zwischen den FAQ-Items */
.al-phco2-root .card__bd details + details{
  margin-top: 10px;
}

/* optional: Summary etwas nicer/konstanter */
.al-phco2-root details > summary{
  padding: 12px 14px;
}

/* FAQ answer spacing */
.al-phco2-root .card details > .hint{
  padding: 12px 14px 14px;
}
/* FAQ answer spacing fix */
.al-phco2-root section.card .card__bd details > div.hint{
  padding: 14px 16px 16px !important;
}