/* ============================================================
   ueber-mich.css — Über mich
   ============================================================ */

/* ── HERO ────────────────────────────────────────────── */
.hero-about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero-photo { position: relative; border-radius: 14px; overflow: hidden; }
.hero-about-text h2 { font-family: var(--font-h); font-size: 44px; font-weight: 900; color: var(--white); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 16px; }
.hero-about-text p { font-family: var(--font-b); font-size: 15px; color: var(--grey-light); line-height: 1.75; font-weight: 300; margin-bottom: 28px; max-width: 440px; }
.hero-stats { display: flex; gap: 28px; margin-bottom: 28px; }
.stat .n { font-family: var(--font-h); font-size: 28px; font-weight: 900; color: var(--green); line-height: 1; }
.stat .l { font-family: var(--font-b); font-size: 11px; color: var(--grey); margin-top: 3px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── GESCHICHTE ──────────────────────────────────────── */
.geschichte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.geschichte-text p { font-family: var(--font-b); font-size: 14px; color: var(--grey-light); line-height: 1.85; margin-bottom: 18px; }
.geschichte-text p:last-child { margin-bottom: 0; }
.geschichte-text p strong { color: var(--white); font-weight: 600; }
.geschichte-sidebar { display: flex; flex-direction: column; gap: 14px; }
.g-fact { background: var(--dark3); border-radius: 10px; padding: 18px 20px; border: 1px solid var(--border); }
.g-fact .label { font-family: var(--font-b); font-size: 10px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.g-fact .value { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: var(--white); }
.g-fact .value em { color: var(--green); font-style: normal; }

/* ── TIMELINE ────────────────────────────────────────── */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding: 0 0 28px 28px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--dark3); border: 2px solid var(--green); flex-shrink: 0; }
.timeline-dot.current { background: var(--green); }
.timeline-year { font-family: var(--font-b); font-size: 11px; font-weight: 600; color: var(--grey); letter-spacing: 1px; margin-bottom: 2px; }
.timeline-role { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 2px; }
.timeline-org { font-family: var(--font-b); font-size: 13px; color: var(--green); }
.timeline-badge { display: inline-block; background: rgba(0,255,136,.1); border: 1px solid rgba(0,255,136,.25); color: var(--green); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-top: 4px; font-family: var(--font-b); }

/* ── KREISLAUF ───────────────────────────────────────── */
.kreislauf-wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; max-width: 680px; margin: 0 auto; }

.kreislauf-cell { padding: 36px 30px; text-align: center; position: relative; }
.kreislauf-cell:nth-child(1) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kreislauf-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
.kreislauf-cell:nth-child(3) { border-right: 1px solid var(--border); }

.kreislauf-num { font-family: var(--font-b); font-size: 10px; font-weight: 600; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; opacity: 0.6; }
.kreislauf-word { font-family: var(--font-h); font-size: 26px; font-weight: 900; color: var(--green); letter-spacing: -0.5px; margin-bottom: 8px; text-shadow: 0 0 20px rgba(0,255,136,.4), 0 0 40px rgba(0,255,136,.15); }
.kreislauf-sub { font-family: var(--font-b); font-size: 12px; color: var(--grey); line-height: 1.5; max-width: 160px; margin: 0 auto; }

/* Center circle */
.kreislauf-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: var(--dark2); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; z-index: 2; }
.kreislauf-center svg { opacity: 0.5; }

/* Arrows between cells */
.k-arrow-right { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); z-index: 3; color: var(--green); opacity: 0.5; }
.k-arrow-down { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--green); opacity: 0.5; }
.k-arrow-left { position: absolute; top: 50%; left: -14px; transform: translateY(-50%) rotate(180deg); z-index: 3; color: var(--green); opacity: 0.5; }
.k-arrow-up { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(180deg); z-index: 3; color: var(--green); opacity: 0.5; }

/* ── ZERTIFIZIERUNGEN ────────────────────────────────── */
.zert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.zert-block { background: var(--dark3); border-radius: 12px; padding: 26px; border: 1px solid var(--border); }
.zert-block-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.zert-logo { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: var(--font-h); font-size: 13px; flex-shrink: 0; }
.zert-logo.exos { background: rgba(240,165,0,.12); border: 1px solid rgba(240,165,0,.3); color: var(--amber); }
.zert-logo.zh { background: rgba(0,229,196,.12); border: 1px solid rgba(0,229,196,.3); color: var(--teal); }
.zert-block-title { font-family: var(--font-h); font-size: 14px; font-weight: 700; color: var(--white); }
.zert-block-sub { font-family: var(--font-b); font-size: 11px; color: var(--grey); margin-top: 2px; }
.zert-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-family: var(--font-b); font-size: 12px; color: var(--grey-light); line-height: 1.4; }
.zert-item:last-child { border-bottom: none; padding-bottom: 0; }
.zert-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 5px; }
.zert-item.amber::before { background: var(--amber); }
.zert-item.teal::before { background: var(--teal); }

.zert-other { background: var(--dark3); border-radius: 12px; padding: 22px 26px; border: 1px solid var(--border); }
.zert-other-title { font-family: var(--font-b); font-size: 11px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }
.zert-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zert-chip { background: var(--dark2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--grey-light); font-family: var(--font-b); }

/* ── CTA ─────────────────────────────────────────────── */
.cta-section { text-align: center; }
.cta-section h2 { font-family: var(--font-h); font-size: 36px; font-weight: 900; color: var(--white); letter-spacing: -1px; margin-bottom: 14px; line-height: 1.15; }
.cta-section p { color: var(--grey-light); font-size: 15px; max-width: 460px; margin: 0 auto 28px; line-height: 1.7; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 990px) {
  .hero-about { grid-template-columns: 1fr; }
  .hero-photo { order: 2; }
  .hero-about-text { order: 1; }
  .hero-about-text h2 { font-size: 36px; }
  .geschichte-grid { grid-template-columns: 1fr; }
  .zert-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero-about-text h2 { font-size: 30px; letter-spacing: -1px; }
  .hero-stats { gap: 16px; flex-wrap: wrap; }
  .kreislauf-word { font-size: 20px; }
  .kreislauf-cell { padding: 24px 16px; }
}