/* ============================================================
   GEBLER WEBDESIGN — Kompetenz & Zertifikat
   Ergaenzt style.css, veraendert sie nicht.
   Alle Werte stammen aus dem bestehenden System:
     Karte  = .kipanel  (surface, 1px line, 8px Radius)
     Marker = .kifeat__tag (Mono, .14em, Akzent)
     Fakten = .about__facts (Raster mit Akzentstrich links)
   ============================================================ */

.cert{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
@media (min-width:900px){
  .cert{ grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,72px); }
}

/* ---------- Textspalte ---------- */
.cert__text h2{ margin-top:16px; }
.cert__text .lead{ margin-top:20px; }
.cert__text p + p{ margin-top:16px; color:var(--steel); }

.cert__facts{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:640px){ .cert__facts{ grid-template-columns:1fr; gap:14px; } }
.cert__facts div{ border-left:2px solid var(--accent); padding-left:14px; }
.cert__facts dt{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
}
.cert__facts dd{ margin-top:5px; font-weight:600; font-size:.98rem; }

/* ---------- Zertifikatskarte ---------- */
.cert__card{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:8px;
  padding:clamp(24px,3vw,34px);
  box-shadow:0 24px 50px -32px rgba(0,0,0,.35);
}
.cert__icon{ display:block; width:40px; height:40px; color:var(--accent); }
.cert__kicker{
  display:block; margin-top:20px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.cert__card h3{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:-.01em; margin-top:8px;
}
.cert__card > p{ margin-top:10px; color:var(--steel); font-size:.95rem; }

.cert__meta{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  display:grid; gap:12px;
}
.cert__meta div{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
.cert__meta dt{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel); flex:none;
}
.cert__meta dd{ font-size:.95rem; font-weight:500; text-align:right; }

.cert__card .btn{ margin-top:24px; width:100%; justify-content:center; }

/* Der Hinweis, der die Aussage ehrlich haelt. Bewusst nicht
   versteckt: er nimmt genau die Erwartung raus, die sonst
   entstehen wuerde. */
.cert__note{
  margin-top:16px;
  font-size:.85rem; line-height:1.55; color:var(--steel-2);
}