/* ============================================================
   TecHN — Subpage styles (extends techn-styles.css)
   Reuses tokens, nav, footer, .btn, .badge, .kicker, .reveal,
   .feat-list, .steps, .form-card, .success from the main sheet.
   ============================================================ */

/* ---- Inner page hero ---- */
.page-hero { position: relative; padding-top: var(--s7); padding-bottom: var(--s6); overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(900px 460px at 80% -10%, var(--accent-faint), transparent 62%);
}
.page-hero .wrap { max-width: 920px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); margin-top: var(--s3); text-wrap: balance; }
.page-hero h1 .em { color: var(--accent); }
.page-hero .lead { margin-top: var(--s3); font-size: clamp(17px, 1.5vw, 20px); color: var(--text-dim); max-width: 62ch; text-wrap: pretty; }
.page-hero .hero-cta { display: flex; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }

/* ---- Breadcrumb ---- */
.crumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.04em; }
.crumb a { color: var(--text-dim); }
.crumb a:hover { color: var(--accent); }
.crumb span { color: var(--text-faint); }

/* ---- Prose (articles & legal) ---- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--s3); }
.prose p { color: var(--text-dim); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin-top: var(--s6); }
.prose h3 { font-size: 21px; margin-top: var(--s5); color: var(--text); }
.prose ul, .prose ol { margin: var(--s2) 0; padding-left: 22px; color: var(--text-dim); font-size: 17px; line-height: 1.7; }
.prose li { margin-top: 8px; }
.prose li::marker { color: var(--accent); }
.prose b, .prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--s3); margin-left: 0; font-family: var(--font-display); font-style: italic; color: var(--text); }

/* ---- Generic 2/3-col card grids ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); align-items: stretch; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); height: 100%; display: flex; flex-direction: column; min-width: 0;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(128,162,222,0.28); }
.card .ic-box {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-faint); color: var(--accent); margin-bottom: var(--s3); flex: none;
}
.card .ic-box svg { width: 24px; height: 24px; }
.card h3 { font-size: 21px; margin-bottom: 8px; text-wrap: balance; }
.card p { color: var(--text-dim); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }

/* ---- Service detail blocks (Leistungen) ---- */
.svc { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s5); align-items: center; padding-block: var(--s6); border-top: 1px solid var(--line-soft); }
.svc:nth-child(even) .svc-media { order: 2; }
.svc-media {
  border: 1px solid var(--line); border-radius: var(--r-lg); aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, rgba(128,162,222,0.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.svc-media .ph { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.06em; text-align: center; padding: var(--s2); }
.svc-media .big-ic { width: 64px; height: 64px; color: var(--accent); opacity: 0.9; }
.svc-body .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.svc-body h2 { font-size: clamp(24px, 3vw, 34px); margin: 10px 0 var(--s2); }
.svc-body > p { color: var(--text-dim); font-size: 17px; line-height: 1.65; margin-bottom: var(--s3); text-wrap: pretty; }

/* ---- Team ---- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); height: 100%; }
.member .pfp {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--accent-ink);
  background: linear-gradient(160deg, var(--accent), var(--accent-2)); margin-bottom: var(--s3);
}
.member h3 { font-size: 19px; }
.member .role { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.04em; margin: 4px 0 10px; }
.member p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }

/* ---- Timeline (company history) ---- */
.history { position: relative; margin-top: var(--s4); padding-left: 28px; }
.history::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--accent), transparent); opacity: 0.5; }
.hist-item { position: relative; padding-bottom: var(--s4); }
.hist-item::before { content: ""; position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.hist-item .yr { font-family: var(--font-mono); font-size: 14px; color: var(--accent); letter-spacing: 0.04em; }
.hist-item h3 { font-size: 19px; margin: 4px 0 6px; }
.hist-item p { color: var(--text-dim); font-size: 15px; line-height: 1.6; max-width: 60ch; }

/* ---- Referenzen / case cards ---- */
.ref-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); height: 100%; display: flex; flex-direction: column; }
.ref-card .sector { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.ref-card h3 { font-size: 20px; margin: 8px 0 var(--s2); text-wrap: balance; }
.ref-card .desc { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-bottom: var(--s3); flex: 1; }
.ref-stats { display: flex; gap: var(--s3); border-top: 1px solid var(--line-soft); padding-top: var(--s3); }
.ref-stats .stat .n { font-family: var(--font-display); font-size: 26px; color: var(--accent); letter-spacing: -0.02em; }
.ref-stats .stat .l { font-size: 12px; color: var(--text-dim); }
.ref-quote { font-family: var(--font-display); font-style: italic; color: var(--text); font-size: 15px; line-height: 1.5; margin-top: var(--s3); padding-left: var(--s2); border-left: 2px solid var(--accent); }

/* ---- Blog ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease; }
.post-card:hover { transform: translateY(-4px); border-color: rgba(128,162,222,0.28); }
.post-thumb { aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, rgba(54,240,160,0.06) 0 14px, transparent 14px 28px), linear-gradient(160deg, var(--surface-2), var(--surface)); display: grid; place-items: center; }
.post-thumb svg { width: 46px; height: 46px; color: var(--accent); opacity: 0.85; }
.post-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.post-body .meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 10px; display: flex; gap: 10px; }
.post-body h3 { font-size: 20px; margin-bottom: 10px; text-wrap: balance; }
.post-body p { color: var(--text-dim); font-size: 15px; line-height: 1.6; flex: 1; }
.post-body .more { margin-top: var(--s3); color: var(--accent); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.post-card:hover .more { gap: 12px; }
.post-body .more svg { width: 16px; height: 16px; }

/* article header meta */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }
.article-meta .chip { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; }

/* ---- Highlight band / CTA reuse ---- */
.mini-cta { background: linear-gradient(150deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6) var(--s4); text-align: center; position: relative; overflow: hidden; }
.mini-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 260px at 50% 0%, var(--accent-faint), transparent 60%); pointer-events: none; }
.mini-cta h2 { font-size: clamp(26px, 3.4vw, 38px); max-width: 22ch; margin: var(--s2) auto var(--s2); text-wrap: balance; position: relative; }
.mini-cta p { color: var(--text-dim); max-width: 52ch; margin: 0 auto var(--s4); font-size: 17px; position: relative; }
.mini-cta .hero-cta { position: relative; justify-content: center; }

/* ---- Stat strip ---- */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.stat-strip .s { text-align: center; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,0.012); }
.stat-strip .s .n { font-family: var(--font-display); font-size: 32px; color: var(--accent); }
.stat-strip .s .l { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; }

/* ---- Legal page ---- */
.legal { max-width: 76ch; }
.legal h2 { font-size: 22px; margin-top: var(--s5); }
.legal p, .legal address { color: var(--text-dim); font-size: 16px; line-height: 1.75; font-style: normal; margin-top: var(--s2); text-wrap: pretty; }
.legal .disclaimer { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: var(--s4); }
.legal .disclaimer p { color: var(--text); }
.legal a { color: var(--accent); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid-3, .team-grid, .blog-grid, .stat-strip { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 1fr; gap: var(--s3); padding-block: var(--s5); }
  .svc:nth-child(even) .svc-media { order: 0; }
}
@media (max-width: 640px) {
  .grid-3, .grid-2, .team-grid, .blog-grid, .stat-strip { grid-template-columns: 1fr; }
  .page-hero { padding-top: var(--s5); }
  .prose p, .prose ul, .prose ol { font-size: 16px; }
  .ref-stats { flex-wrap: wrap; gap: var(--s2); }
  .crumb { font-size: 11.5px; }
}