/* ============================================================
   DATA FACTORY Design System · gemeinsames Stylesheet
   ============================================================ */
:root {
  --bg:#F5F7F6; --card:#FFFFFF; --text:#1E2A27; --dim:#66756F;
  --pine:#0E5F55; --pine-dark:#0B4A43; --sage:#9DBFB2; --mist:#DCE6E1;
  --gold:#C89B3C; --gold-dim:#8A6A25;
  --pine-05:rgba(14,95,85,.05); --pine-08:rgba(14,95,85,.08); --pine-12:rgba(14,95,85,.12);
  --shadow:0 1px 2px rgba(30,42,39,.04), 0 8px 24px rgba(30,42,39,.06);
  --radius:16px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.serif { font-family:'Fraunces',serif; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
section { padding:96px 0; }
a { color:inherit; }

/* ---------- Buttons & Chips ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; padding:12px 24px; border-radius:100px; border:1px solid var(--pine); background:var(--pine); color:#fff; cursor:pointer; text-decoration:none; transition:background .15s; }
.btn:hover { background:var(--pine-dark); }
.btn.ghost { background:transparent; color:var(--pine); }
.btn.ghost:hover { background:var(--pine-08); }
.btn.lg { padding:15px 30px; font-size:15px; }
.chip { display:inline-block; font-size:11.5px; padding:4px 12px; border-radius:100px; background:var(--pine-08); color:var(--pine); font-weight:500; }
.chip.gold { background:rgba(200,155,60,.12); color:var(--gold-dim); }

/* ---------- Section headers ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--pine); font-weight:600; }
.eyebrow.boxed { background:var(--pine-05); border:1px solid var(--pine-12); padding:6px 14px; border-radius:100px; }
h2.title { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(28px,3.4vw,40px); line-height:1.15; letter-spacing:-.01em; margin-top:16px; }
h2.title i { font-style:italic; color:var(--pine); }
.lede { color:var(--dim); margin-top:14px; max-width:640px; }
.sec-head { max-width:760px; }
.sec-head.center { margin:0 auto; text-align:center; }
.sec-head.center .lede { margin-left:auto; margin-right:auto; }

/* ---------- Cards ---------- */
.card { background:var(--card); border:1px solid var(--mist); border-radius:var(--radius); box-shadow:var(--shadow); }
.card .chead { padding:16px 20px; border-bottom:1px solid var(--mist); display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; font-weight:600; }
.card .chead .sub { font-weight:400; color:var(--dim); font-size:12px; }
.card .cbody { padding:20px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ---------- Nav ---------- */
.nav-outer { position:sticky; top:0; z-index:50; background:rgba(245,247,246,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--mist); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; }
.brand { font-family:'Fraunces',serif; font-size:20px; font-weight:500; text-decoration:none; }
.brand span { color:var(--pine); }
.nav ul { display:flex; gap:28px; list-style:none; font-size:13.5px; color:var(--dim); align-items:center; }
.nav ul a { text-decoration:none; transition:color .15s; }
.nav ul a:hover, .nav ul a.cur { color:var(--text); }
.nav ul a.cur { font-weight:600; color:var(--pine); }
.nav .actions { display:flex; gap:10px; }
/* Dropdown */
.dd { position:relative; }
.dd > a::after { content:" ▾"; font-size:10px; }
.dd-menu { display:none; position:absolute; top:100%; left:-14px; padding-top:12px; }
.dd-menu .inner { background:var(--card); border:1px solid var(--mist); border-radius:14px; box-shadow:var(--shadow); padding:8px; min-width:190px; }
.dd-menu a { display:block; padding:9px 14px; border-radius:9px; font-size:13.5px; text-decoration:none; color:var(--text); }
.dd-menu a:hover { background:var(--pine-05); color:var(--pine); }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display:block; }

/* ---------- Hero (Home) ---------- */
.hero { text-align:center; padding:88px 24px 40px; }
.hero h1 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(34px,4.6vw,58px); line-height:1.1; letter-spacing:-.012em; margin:26px auto 0; max-width:880px; }
.hero h1 i, .v-hero h1 i { font-style:italic; color:var(--pine); }
.hero p.sub { margin:20px auto 0; color:var(--dim); font-size:17px; max-width:620px; }
.hero .ctas { display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
.hero .trust { margin-top:26px; font-size:12.5px; color:var(--dim); letter-spacing:.02em; }
.kpi-row { display:flex; justify-content:center; gap:0; margin:44px auto 0; max-width:720px; border:1px solid var(--mist); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.kpi-row .kpi { flex:1; padding:20px 12px; border-left:1px solid var(--mist); text-align:center; }
.kpi-row .kpi:first-child { border-left:none; }
.kpi-row .kpi .v { font-family:'Fraunces',serif; font-size:30px; color:var(--pine); }
.kpi-row .kpi .l { font-size:12px; color:var(--dim); margin-top:4px; }

/* ---------- Hero (Branchenseiten) ---------- */
.v-hero { display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; max-width:1180px; margin:0 auto; padding:72px 24px 40px; }
.v-hero h1 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px,3.8vw,48px); line-height:1.12; letter-spacing:-.012em; margin-top:22px; }
.v-hero p.sub { margin-top:16px; color:var(--dim); font-size:16.5px; max-width:520px; }
.v-hero .ctas { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.v-hero .minikpis { display:flex; gap:28px; margin-top:30px; }
.v-hero .minikpis .v { font-family:'Fraunces',serif; font-size:26px; color:var(--pine); }
.v-hero .minikpis .l { font-size:11.5px; color:var(--dim); margin-top:2px; }
.crumbs { font-size:12.5px; color:var(--dim); }
.crumbs a { text-decoration:none; }
.crumbs a:hover { color:var(--pine); }

/* ---------- Datenlandschaft ---------- */
.landscape { border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); background:var(--card); padding:44px 0; }
.landscape .inner { display:grid; grid-template-columns:1fr 1.4fr; gap:36px; align-items:center; }
.landscape h3 { font-family:'Fraunces',serif; font-weight:500; font-size:21px; }
.landscape p { font-size:14px; color:var(--dim); margin-top:8px; }
.landscape .systems { display:flex; flex-wrap:wrap; gap:10px; }
.sysitem { font-size:13px; font-weight:500; padding:9px 16px; border-radius:100px; background:var(--bg); border:1px solid var(--mist); }
.sysitem b { color:var(--pine); font-weight:600; }

/* ---------- Detaillierte Use-Case-Karten (Branchenseiten) ---------- */
.uc2-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.uc2 { padding:26px 28px; display:flex; flex-direction:column; }
.uc2 .top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.uc2 h3 { font-family:'Fraunces',serif; font-weight:500; font-size:20px; line-height:1.25; }
.uc2 .kpi { text-align:right; flex-shrink:0; }
.uc2 .kpi .v { font-family:'Fraunces',serif; font-size:26px; color:var(--pine); line-height:1; white-space:nowrap; }
.uc2 .kpi .l { font-size:11px; color:var(--dim); margin-top:4px; max-width:120px; }
.uc2 .block { margin-top:14px; }
.uc2 .block .lbl { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--pine); font-weight:600; }
.uc2 .block p { font-size:13.5px; color:var(--dim); margin-top:4px; }
.uc2 .tags { margin-top:auto; padding-top:16px; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Featured viz two-col ---------- */
.viz2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }

/* ---------- Mini-Case ---------- */
.case { border:1px solid var(--pine-12); background:linear-gradient(180deg, var(--pine-05), rgba(14,95,85,.02)); border-radius:var(--radius); padding:36px 40px; display:grid; grid-template-columns:1.3fr .7fr; gap:36px; align-items:center; }
.case blockquote { font-family:'Fraunces',serif; font-style:italic; font-size:clamp(17px,2vw,21px); line-height:1.45; }
.case .who { margin-top:16px; font-size:13px; color:var(--dim); }
.case .who b { color:var(--text); }
.case .nums { display:grid; gap:14px; }
.case .nums .n { border-left:3px solid var(--pine); padding-left:16px; }
.case .nums .v { font-family:'Fraunces',serif; font-size:26px; color:var(--pine); line-height:1.1; }
.case .nums .l { font-size:12px; color:var(--dim); margin-top:2px; }

/* ---------- Cross-links zu anderen Branchen ---------- */
.crosslinks { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.crosslink { padding:24px 28px; display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.crosslink:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.crosslink .b { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pine); font-weight:600; }
.crosslink h4 { font-family:'Fraunces',serif; font-weight:500; font-size:19px; margin-top:6px; }
.crosslink .arr { color:var(--pine); font-size:20px; }

/* ---------- Problem (Home) ---------- */
.pains { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.pain { padding:26px; border-radius:var(--radius); background:var(--card); border:1px solid var(--mist); box-shadow:var(--shadow); }
.pain .no { font-family:'Fraunces',serif; font-size:15px; color:var(--gold-dim); }
.pain h3 { font-size:17px; font-weight:600; margin-top:10px; }
.pain p { font-size:14px; color:var(--dim); margin-top:8px; }
.pain q { font-family:'Fraunces',serif; font-style:italic; display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--mist); color:var(--text); font-size:14.5px; }

/* ---------- Plattform / 3 Schichten (Home) ---------- */
.layers { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; align-items:center; }
.layer-list .layer { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--mist); }
.layer-list .layer:last-child { border-bottom:none; }
.layer .badge { width:44px; height:44px; border-radius:14px; background:var(--pine-08); color:var(--pine); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:18px; flex-shrink:0; }
.layer h3 { font-size:17px; font-weight:600; }
.layer p { font-size:14px; color:var(--dim); margin-top:6px; }
.layer .tags { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.timeline { margin-top:56px; }
.timeline .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:28px; position:relative; }
.timeline .steps::before { content:""; position:absolute; top:11px; left:8%; right:8%; height:2px; background:var(--mist); }
.tstep { position:relative; padding:0 20px; }
.tstep .dot { width:22px; height:22px; border-radius:50%; background:var(--card); border:2px solid var(--pine); position:relative; z-index:1; }
.tstep:last-child .dot { background:var(--pine); }
.tstep .when { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--pine); font-weight:600; margin-top:14px; }
.tstep h4 { font-size:15.5px; font-weight:600; margin-top:6px; }
.tstep p { font-size:13.5px; color:var(--dim); margin-top:6px; }

/* ---------- Agenten ---------- */
.agents-sec { background:var(--card); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); }
.agent-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.agent-card { border:1px solid var(--mist); border-radius:var(--radius); padding:22px; background:var(--bg); transition:transform .2s, box-shadow .2s; }
.agent-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.agent-card .avatar { width:44px; height:44px; border-radius:14px; font-size:14px; }
.agent-card h3 { font-size:15.5px; font-weight:600; margin-top:14px; }
.agent-card .role { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-top:2px; }
.agent-card ul { list-style:none; margin-top:12px; }
.agent-card li { font-size:13px; color:var(--dim); padding:5px 0 5px 18px; position:relative; }
.agent-card li::before { content:"—"; position:absolute; left:0; color:var(--sage); }
.qa-band { margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.qa { padding:18px 20px; border-radius:14px; background:var(--pine-05); border:1px solid var(--pine-12); }
.qa b { font-size:13.5px; color:var(--pine); display:block; }
.qa span { font-size:12.5px; color:var(--dim); display:block; margin-top:4px; }

/* ---------- Dashboard mock ---------- */
.dash { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; max-width:1180px; margin:48px auto 0; padding:0 24px; }
.agentrow { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--mist); }
.agentrow:last-of-type { border-bottom:none; }
.avatar { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; color:#fff; flex-shrink:0; }
.agentrow .info { flex:1; min-width:0; }
.agentrow .info b { font-size:13.5px; font-weight:600; display:block; }
.agentrow .info span { font-size:12px; color:var(--dim); }
.agentrow svg { flex-shrink:0; }
.decision { margin-top:14px; padding:12px 14px; background:var(--pine-05); border:1px solid var(--pine-12); border-radius:12px; font-size:12.5px; color:var(--dim); }
.decision b { color:var(--pine); }
.decision .act { color:var(--pine); font-weight:600; cursor:pointer; white-space:nowrap; }

/* ---------- Logo strip ---------- */
.logostrip { border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); background:var(--card); padding:26px 0; margin-top:72px; }
.logostrip .row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 34px; }
.logostrip .label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); width:100%; text-align:center; margin-bottom:6px; }
.wordmark { font-size:14px; font-weight:600; color:#9AA6A1; letter-spacing:.02em; }

/* ---------- Use-Case-Teaser (Home) ---------- */
.uc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.uc { display:flex; flex-direction:column; }
.uc .cbody { flex:1; display:flex; flex-direction:column; }
.uc h3 { font-family:'Fraunces',serif; font-weight:500; font-size:21px; }
.uc .branch { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pine); font-weight:600; }
.uc p { font-size:14px; color:var(--dim); margin-top:8px; }
.uc .viz { margin-top:16px; border:1px solid var(--mist); border-radius:12px; padding:12px; background:var(--bg); }
.uc .kpis { display:flex; gap:20px; margin-top:16px; }
.uc .kpis .v { font-family:'Fraunces',serif; font-size:24px; color:var(--pine); }
.uc .kpis .l { font-size:11.5px; color:var(--dim); }
.uc .more { margin-top:auto; padding-top:18px; font-size:13.5px; font-weight:600; color:var(--pine); text-decoration:none; }
.uc .more:hover { text-decoration:underline; }

/* ---------- Integrationen ---------- */
.int-sec { background:var(--card); border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); }
.int-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.int-cat { border:1px solid var(--mist); border-radius:var(--radius); padding:20px 22px; background:var(--bg); }
.int-cat h4 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.int-cat .items { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.int-item { font-size:13px; font-weight:500; padding:6px 14px; border-radius:100px; background:var(--card); border:1px solid var(--mist); }
.sov { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; }
.sov .s { padding:20px; border-radius:14px; background:var(--pine-05); border:1px solid var(--pine-12); }
.sov .s b { display:block; font-size:14px; color:var(--pine); }
.sov .s span { display:block; font-size:12.5px; color:var(--dim); margin-top:6px; }

/* ---------- Zusammenarbeit ---------- */
.paths { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.path { padding:30px; }
.path .who { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pine); font-weight:600; }
.path h3 { font-family:'Fraunces',serif; font-weight:500; font-size:23px; margin-top:10px; }
.path p { font-size:14px; color:var(--dim); margin-top:10px; }
.path ul { list-style:none; margin-top:16px; }
.path li { font-size:13.5px; padding:7px 0 7px 26px; position:relative; border-bottom:1px solid var(--mist); }
.path li:last-child { border-bottom:none; }
.path li::before { content:"✓"; position:absolute; left:2px; color:var(--pine); font-weight:600; }
.assessment { margin-top:24px; border:1px solid rgba(200,155,60,.35); background:linear-gradient(180deg, rgba(200,155,60,.06), rgba(200,155,60,.02)); border-radius:var(--radius); padding:28px 30px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.assessment .txt { flex:1; min-width:280px; }
.assessment h3 { font-family:'Fraunces',serif; font-weight:500; font-size:22px; }
.assessment h3 i { font-style:italic; color:var(--gold-dim); }
.assessment p { font-size:14px; color:var(--dim); margin-top:8px; max-width:560px; }

/* ---------- Quote ---------- */
.quote { text-align:center; max-width:760px; margin:0 auto; }
.quote blockquote { font-family:'Fraunces',serif; font-size:clamp(20px,2.6vw,27px); font-weight:400; line-height:1.4; font-style:italic; }
.quote .who { margin-top:20px; font-size:13.5px; color:var(--dim); }
.quote .who b { color:var(--text); font-style:normal; }

/* ---------- Demo / CTA ---------- */
.demo-sec { background:var(--pine); color:#fff; border-radius:24px; margin:0 24px; }
.demo-inner { max-width:1080px; margin:0 auto; padding:72px 40px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.demo-inner h2 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(26px,3vw,38px); line-height:1.15; }
.demo-inner h2 i { font-style:italic; color:var(--sage); }
.demo-inner .points { margin-top:22px; list-style:none; }
.demo-inner .points li { font-size:14px; color:rgba(255,255,255,.85); padding:6px 0 6px 26px; position:relative; }
.demo-inner .points li::before { content:"✓"; position:absolute; left:0; color:var(--sage); font-weight:600; }
.form { background:#fff; border-radius:var(--radius); padding:26px; color:var(--text); box-shadow:0 20px 50px rgba(0,0,0,.18); }
.form label { display:block; font-size:12.5px; font-weight:600; margin:14px 0 6px; }
.form label:first-of-type { margin-top:0; }
.form input, .form select, .form textarea { width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:11px 14px; border:1px solid var(--mist); border-radius:10px; background:var(--bg); color:var(--text); outline:none; transition:border-color .15s; }
.form input:focus, .form select:focus, .form textarea:focus { border-color:var(--pine); }
.form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form .note { font-size:11.5px; color:var(--dim); margin-top:12px; }
.form .btn { width:100%; justify-content:center; margin-top:18px; }
.form .ok { display:none; padding:14px; border-radius:10px; background:var(--pine-08); color:var(--pine); font-size:13.5px; font-weight:500; margin-top:16px; text-align:center; }

/* ---------- Footer ---------- */
footer { padding:64px 24px 40px; }
.foot { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot .col h5 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:600; margin-bottom:14px; }
.foot .col a { display:block; font-size:13.5px; color:var(--dim); text-decoration:none; padding:4px 0; }
.foot .col a:hover { color:var(--text); }
.foot .about p { font-size:13px; color:var(--dim); margin-top:12px; max-width:300px; }
.legal { max-width:1180px; margin:40px auto 0; padding-top:20px; border-top:1px solid var(--mist); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--dim); }

/* ---------- Responsive ---------- */
@media (max-width:1000px) {
  .agent-grid, .qa-band, .sov { grid-template-columns:1fr 1fr; }
  .uc-grid, .pains, .uc2-grid, .viz2, .crosslinks { grid-template-columns:1fr; }
  .dash, .layers, .paths, .int-grid, .demo-inner, .v-hero, .landscape .inner, .case { grid-template-columns:1fr; }
  .foot { grid-template-columns:1fr 1fr; }
  .nav ul { display:none; }
  section { padding:72px 0; }
}
@media (max-width:600px) {
  .agent-grid, .qa-band, .sov, .foot { grid-template-columns:1fr; }
  .kpi-row { flex-direction:column; }
  .kpi-row .kpi { border-left:none; border-top:1px solid var(--mist); }
  .kpi-row .kpi:first-child { border-top:none; }
  .timeline .steps { grid-template-columns:1fr; gap:26px; }
  .timeline .steps::before { display:none; }
  .form .row2 { grid-template-columns:1fr; }
  .demo-sec { margin:0 12px; }
  .demo-inner { padding:48px 24px; }
  .case { padding:28px 24px; }
}