/* =========================================================
   Fahringer Solutions – Unterseiten (Softwareentwicklung, IT vor Ort)
   ========================================================= */

/* ---------- hero ---------- */
.hero{ padding-top:36px; padding-bottom:20px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
.eyebrow{ font-size:12.5px; color:var(--copper); font-weight:500; margin-bottom:18px; }
.hero h1{ font-size:clamp(34px, 4.6vw, 50px); margin-bottom:20px; }
.hero .lead{ font-size:17.5px; color:var(--text-dim); margin-bottom:30px; max-width:480px; }
.hero-ctas{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.hero-scroll{ font-size:14px; color:var(--text-dim); text-decoration:none; }

/* ---------- code / status window (hero signature) ---------- */
.code-window{
  background:#151A2E; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 2px rgba(27,33,28,0.05), 0 30px 70px rgba(21,26,46,0.28);
  border:1px solid rgba(255,255,255,0.06);
}
.code-winbar{ display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
.code-winbar .dots{ display:flex; gap:6px; flex:none; }
.code-winbar .dots span{ width:9px; height:9px; border-radius:50%; }
.code-winbar .dots span:nth-child(1){ background:#E0685F; }
.code-winbar .dots span:nth-child(2){ background:#E0A23D; }
.code-winbar .dots span:nth-child(3){ background:#3F9E6C; }
.code-winbar .filename{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(255,255,255,0.45); }
.code-tabs{ display:flex; gap:4px; overflow-x:auto; }
.code-tab{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(255,255,255,0.4); padding:5px 12px; border-radius:6px; white-space:nowrap; }
.code-tab.active{ color:#DCE4FB; background:rgba(255,255,255,0.07); }
.code-body{ padding:22px 24px 26px; font-family:'IBM Plex Mono', monospace; font-size:13.5px; line-height:2.05; overflow-x:auto; }
.code-body .line{ display:flex; gap:14px; white-space:pre; align-items:baseline; }
.code-body .ln{ color:rgba(255,255,255,0.28); user-select:none; width:16px; flex:none; text-align:right; }
.code-body .prompt{ color:#6E8CFF; flex:none; }
.tok-kw{ color:#C792EA; } .tok-cls{ color:#8AB4F8; } .tok-fn{ color:#82E6C4; }
.tok-str{ color:#F0A24A; } .tok-com{ color:rgba(255,255,255,0.35); } .tok-txt{ color:#DCE4FB; }
.status-ok{ color:#5FD98A; font-weight:600; }
.status-ms{ color:rgba(255,255,255,0.35); font-size:12px; }
@media (max-width:480px){
  .code-body{ font-size:12px; padding:18px 16px 22px; }
  .code-body .line{ gap:9px; }
}

/* ---------- section headers ---------- */
.sec-head{ margin-bottom:44px; max-width:560px; }
.sec-head h2{ font-size:clamp(26px,3.2vw,34px); margin-top:10px; }
.sec-label{ font-size:12.5px; color:var(--copper); font-weight:500; }
.sec-head p{ color:var(--text-dim); font-size:16px; margin-top:14px; }

/* ---------- feature cards ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
@media (max-width:760px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{
  background:var(--glass-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(27,33,28,0.07); border-color:var(--line-strong); }
.feature-icon{
  width:42px; height:42px; border-radius:12px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--mint), var(--copper));
}
.feature-icon svg{ width:20px; height:20px; stroke:#FBFAF6; }
.feature h3{ font-size:18px; margin-bottom:8px; }
.feature p{ color:var(--text-dim); font-size:14.5px; }
.feature.wide{ grid-column:1 / -1; }
@media (max-width:760px){ .feature.wide{ grid-column:auto; } }

/* ---------- tech stack / ausstattung ---------- */
.tech-row{ display:flex; flex-wrap:wrap; gap:14px; }
.tech-pill{
  display:flex; align-items:center; gap:10px;
  background:var(--glass-2); border:1px solid var(--line); border-radius:100px;
  padding:10px 18px 10px 14px;
}
.tech-pill .dot{ width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--mint), var(--copper)); flex:none; }
.tech-pill .name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14.5px; color:#12160F; }
.tech-pill .why{ font-size:13px; color:var(--text-dim); }
@media (max-width:560px){ .tech-pill{ flex-wrap:wrap; } .tech-pill .why{ width:100%; } }

/* ---------- process / ablauf ---------- */
.process{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:64px 1fr; gap:22px; position:relative; padding-bottom:36px; }
.step:last-child{ padding-bottom:0; }
.step-num{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--mint);
  width:64px; height:64px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--glass-2); display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; flex:none;
}
.step:not(:last-child)::before{
  content:''; position:absolute; left:31px; top:64px; bottom:0; width:1px;
  background:linear-gradient(var(--line-strong), var(--line));
}
.step-body{ padding-top:10px; }
.step-body h3{ font-size:19px; margin-bottom:8px; }
.step-body p{ color:var(--text-dim); font-size:15px; max-width:520px; }
@media (max-width:560px){
  .step{ grid-template-columns:48px 1fr; gap:16px; }
  .step-num{ width:48px; height:48px; font-size:12px; }
  .step:not(:last-child)::before{ left:23px; top:48px; }
}

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:12px; max-width:720px; }
.faq-item{ background:var(--glass-2); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15.5px; color:#12160F;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .chev{ flex:none; width:18px; height:18px; transition:transform .2s ease; color:var(--text-dim); }
.faq-item[open] .chev{ transform:rotate(45deg); }
.faq-item .faq-a{ padding:0 22px 20px; color:var(--text-dim); font-size:15px; max-width:600px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--glass-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band h2{ font-size:clamp(22px,2.6vw,28px); margin-bottom:8px; }
.cta-band p{ color:var(--text-dim); font-size:15.5px; }
@media (max-width:560px){ .cta-band{ padding:30px 24px; } }