/*
Theme Name: Astra Child — Zinseszinsenrechner
Theme URI: https://zinseszinsenrechner.de/
Description: Astra Child Theme for the one-page Zinseszinsenrechner build (block-by-block Groups). Calm, minimal, fast.
Author: Gaganh Grover
Template: astra
Version: 1.0.0
Text Domain: astra-child-zinseszinsenrechner
*/

/* =========================================================
   Global design tokens (Phase 4: calm authority)
   ========================================================= */
:root{
  --zzr-text:#111827;
  --zzr-muted:#6B7280;
  --zzr-border:#E5E7EB;
  --zzr-border-strong:#D1D5DB;
  --zzr-bg:#FFFFFF;
  --zzr-btn:#111827;
  --zzr-btnText:#FFFFFF;
  --zzr-radius:6px;
  --zzr-w:820px;
}

/* Keep Astra layout clean */
.site-content{ padding-top: 0; }
.ast-container{ max-width: var(--zzr-w); }

/* Typography */
body{
  color: var(--zzr-text);
  line-height: 1.6;
  font-size: 16px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
h1{ font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
h2{ font-size: 24px; line-height: 1.3; font-weight: 600; margin-top: 64px; }
h3{ font-size: 20px; line-height: 1.35; font-weight: 600; }
p{ margin: 0 0 16px; }

/* Utility (apply via Group → Advanced → Additional CSS class) */
.zzr-wrap{ max-width: var(--zzr-w); margin: 0 auto; padding: 28px 18px 54px; }
.zzr-lead{ font-size: 17px; margin: 0 0 10px; }
.zzr-micro{ font-size: 14px; color: var(--zzr-muted); margin: 0; }
.zzr-section{ margin-top: 72px; }
.zzr-divider{ border-top: 1px solid var(--zzr-border); margin: 40px 0 0; }

/* Calculator form skin (works inside Gutenberg Group blocks) */
.zzr-form{
  border: 1px solid var(--zzr-border);
  border-radius: 14px;
  padding: 18px 16px;
  margin-top: 12px;
}
.zzr-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 14px;
}
.zzr-field label{
  display:block;
  font-size:14px;
  color: var(--zzr-muted);
  margin:0 0 6px;
}
.zzr-input{
  width:100%;
  border: 1px solid var(--zzr-border-strong);
  border-radius: var(--zzr-radius);
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
  background: #fff;
  color: var(--zzr-text);
}
.zzr-input:focus{ border-color: #9CA3AF; }

.zzr-btn{
  margin-top: 14px;
  display: inline-block;
  border: none;
  border-radius: var(--zzr-radius);
  padding: 12px 18px;
  background: var(--zzr-btn);
  color: var(--zzr-btnText);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}
.zzr-btn:hover{ opacity: .92; }

.zzr-warn{
  margin-top: 14px;
  padding: 12px 12px;
  border: 1px solid var(--zzr-border);
  border-radius: 10px;
  color: var(--zzr-muted);
  font-size: 14px;
}

/* Result blocks */
.zzr-resblock{
  padding: 18px 0 24px;
  border-bottom: 1px solid var(--zzr-border);
}
.zzr-big{
  font-size: 32px;
  line-height: 1.2;
  font-weight: 600;
  margin: 4px 0 14px;
  min-height: 40px; /* CLS guard */
}
.zzr-kv{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin: 0 0 12px;
}
.zzr-kv dt{ font-size: 13px; color: var(--zzr-muted); margin: 0; }
.zzr-kv dd{ margin: 0; font-size: 16px; }

/* FAQ */
.zzr-faq details{
  border-bottom: 1px solid var(--zzr-border);
  padding: 12px 0;
}
.zzr-faq summary{
  cursor: pointer;
  font-weight: 500;
}

/* Optional bars viz */
.zzr-viz{ padding: 26px 0 10px; }
.zzr-bars{ margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.zzr-barrow{ display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; }
.zzr-barlabel{ font-size: 14px; color: var(--zzr-muted); }
.zzr-bartrack{ height: 12px; border: 1px solid var(--zzr-border); border-radius: 999px; overflow: hidden; background: #fff; }
.zzr-barfill{ height: 100%; background: #111827; opacity: .25; width: 0%; transition: width 220ms ease; }
.zzr-barvalue{ font-size: 14px; color: var(--zzr-muted); min-width: 120px; text-align: right; }

/* Mobile */
@media (max-width: 720px){
  h1{ font-size: 32px; }
  .zzr-grid{ grid-template-columns: 1fr; }
  .zzr-big{ font-size: 28px; }
  .zzr-kv{ grid-template-columns: 1fr; }
  .zzr-barrow{ grid-template-columns: 1fr; }
  .zzr-barvalue{ text-align: left; min-width: 0; }
}

/* --- Visualization Colors (calm, distinguishable) --- */
.zzr-bar-paidin  { background-color: var(--zzr-muted); }
.zzr-bar-nominal { background-color: #3B82F6; }
.zzr-bar-real    { background-color: #10B981; }

/* default fill width controlled by CSS */
.zzr-barfill{ width: 0%; }

/* --- Mobile Safety Fix --- */
@media (max-width: 720px){
  .zzr-big{
    font-size: 26px;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}