/* guides.css - Grundstil für Ratgeber auf airfryerguide.de */

.zs-section{
  margin-bottom:3rem;
  padding-bottom:1rem;
  border-bottom:1px solid #1e293b;
}

/* Headings */
.zs-title{
  font-size:1.8rem;
  margin-top:2rem;
  margin-bottom:1rem;
  color:#f8fafc;
}

/* BASE BOX */
.zs-box{
  padding:1.2rem 1.4rem;
  border-radius:8px;
  margin-bottom:1rem;
  border-left:4px solid #334155;
  background:#020617;
  color:#e5e7eb;
}

/* Wichtig: auch Überschriften IN der Box */
.zs-box h2,
.zs-box h3,
.zs-box h4{
  color:#f8fafc;
}

.zs-section h4 {
    margin-top: 30px;
    margin-bottom: 6px;
}

.zs-section ul {
    margin-bottom: 20px;
}

.zs-box p,
.zs-box li{
  color:#e5e7eb;
}

/* Varianten */
.zs-box-blue{
  border-color:#3b82f6;
  background:#0f172a;
}

.zs-box-green{
  border-color:#22c55e;
  background:#052e16;
}

.zs-box-yellow{
  border-color:#eab308;
  background:#422006;
}

.zs-box-highlight{
  border-color:#f59e0b;
  background:#1c1917;
}

/* Listen */
ul{
  margin:0;
  padding-left:1.1rem;
}

/* Buttons */
.zs-button{
  display:inline-block;
  padding:0.6rem 1rem;
  background:#3656d6;
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
}

.zs-button:hover{
  background:#2d49b2;
}

.zs-button-row{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:2rem 0;
  flex-wrap:wrap;
}

/* =========================
   GUIDE INLINE LINKS
========================= */

.zs-section a,
.zs-box a{
  color:#a5b4fc;
  text-decoration:none;
  transition:color .15s ease-in-out;
}

.zs-section a:hover,
.zs-box a:hover{
  color:#c7d2fe;
  text-decoration:none;
}

/* =========================
   GUIDE TABELLEN
========================= */

  .zs-table.zs-table--spacious th,
  .zs-table.zs-table--spacious td {
    padding: 14px 16px;
    vertical-align: top;
    line-height: 1.35;
  }

  .zs-table.zs-table--spacious thead th {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .zs-table.zs-table--spacious tbody tr + tr td {
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* Zahlen-Spalten ruhiger machen */
  .zs-table .zs-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Lange Formeln besser lesbar umbrechen */
  .zs-table .zs-formula {
    white-space: normal;
    word-break: break-word;
  }